Question

我一直在尝试使用React，React-Router和打字稿（摘自here）在电子项目上创建SPA。

我目前正试图通过<Link>将其重新路由到其他路由，但在控制台中却出现错误提示

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://settings/' cannot be created in a document with origin 'http://localhost:2003' and URL 'http://localhost:2003/'.

其中localhost:2003是与项目关联的端口。我不确定如何解决此问题，因为我认为这是电子特有的问题？不确定。

我正在运行的代码与https://codesandbox.io/s/weathered-river-9yrbv

完全相同

（请先在沙箱中进入/ app）

Answer 1

您疯狂地错误地在props函数中加载了App。

function App(props) {
  console.log(props);

  return (
    <div className="App">
      {/* {props} // Remove this line... */}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ProtectedRoute path="/app" component={MainComponent} />
    </div>
  );
}

您必须通过App包装Route组件。

import { BrowserRouter as Router, Link, Route } from "react-router-dom";

...
...

render(
  <Router>
    <Route path="/" component={App}/>
  </Router>,
  rootElement
);

现在您可以在props中获得console.log。

这是为您更新的工作代码。
https://codesandbox.io/s/elegant-elion-qr1qf

希望这对您有用！

电子上的反应路由器无法更改历史记录

1 个答案: