react-router-dom 仅更改 url

Posted 2023-02-21

【中文标题】react-router-dom 仅更改 url

【英文标题】：react-router-dom changes only url

【发布时间】：2018-12-22 01:30:42

【问题描述】：

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

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

所以，我将 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>

对于 App.js，我导入了 Router、Switch 和 Route。对于 header.js，我导入路由器和链接。

一切都通过标准的 ReactDOM.render(, document.getElementById('root')); 显示出来

你能帮帮我吗？

【参考方案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>
  );

【讨论】：

实际上，我希望标题位于另一个组件中。这是一个完整的导航结构。

@MaciekMesjasz 我不确定我是否理解。 Header 在我的示例中是一个单独的组件，只是它与应用程序的其余部分共享相同的 Router。

但是当它在路由器外部时，我收到一个链接未定义的错误

我终于想通了。非常感谢

【参考方案2】：

这是因为Header不在Router内部：

试试这个：

<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>

【讨论】：

它对我有用，显示 Index 和 Offer 组件的代码

索引和报价组件只是返回一些 html。我应该将什么导入到我的标头组件中？

按照@Tholle 的指示，应该可以解决您的问题