Question

我已经建立了一个带有路由器域名的网站，但不幸的是URL发生了变化，我需要刷新页面才能看到正确的组件。

我已经看过StackOverflow上的所有线程，但没有一个对我有帮助。

因此，我将App.js作为主要容器：

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

标题中有链接：

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

我将Router，Switch和Route导入App.js。我要导入header.js到Router和Link。

所有内容均通过标准ReactDOM.render（，document.getElementById（'root'））;

显示

可以帮我吗？

Answer 1

您应该只包含一个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>
  );
}

Answer 2

这是因为标头不在路由器内部

尝试一下：

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

在Header组件中：

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

react-router-dom仅更改网址

2 个答案: