react-router-dom 仅更改 url

Question

我创建了一个带有 router-dom 的网站，不幸的是 URL 发生了变化，我需要刷新页面才能看到正确的组件。

我已经看过 Whosebug 上的所有讨论帖，其中 none 对我有帮助。

所以，我有 App.js 作为主容器：

<div>
  <Header />
  <Router>
    <Switch>
      <Route exact path="/" component={Index} />
      <Route path="/offer" component={Offer} />
    </Switch>
  </Router>
</div>

在 header 我有链接：

<Router>
  <Link to="/">Start</Link>
  <Link to="/offer">Offer</Link>
</Router>

为了App.js我导入路由器、交换机和路由。 header.js 我导入 Router 和 Link.

一切都按标准显示 ReactDOM.render(, document.getElementById('root'));

你能帮帮我吗？

Answer 1

因为Header不在Router里面：

试试这个：

<Router>
  <Header />
  <Switch>
    <Route exact path="/" component={Index} />
    <Route path="/offer" component={Offer} />
  </Switch>
</Router>

在页眉组件中：

<div>
  <Link to="/">Start</Link>
  <Link to="/offer">Offer</Link>
<div>

Answer 2

您应该只有一个 Router 组件，最好是应用程序的最顶层组件。

例子

function Header() {
  return (
    <div>
      <Link to="/">Start</Link>
      <Link to="/offer">Offer</Link>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <Header />
        <Switch>
          <Route exact path="/" component={Index} />
          <Route path="/offer" component={Offer} />
        </Switch>
      </div>
    </Router>
  );
}

react-router-dom 仅更改 url

react-router-dom changes only url

javascript

reactjs

react-router-dom