如何在子反应组件中拥有反应路由器链接答案

【问题标题】：How to have React Router links inside child react components如何在子反应组件中拥有反应路由器链接
【发布时间】：2020-08-12 14:27:57
【问题描述】：

我正在为我确定是 React Router 的基础知识而苦苦挣扎。我有一个整体 App.js 文件和一个子反应功能组件 Navbar.js。我希望我的 Switch 位于 App.js 中，但 Navbar.js 具有指向我不同页面的链接。

我之前看到的有关嵌套的问题都谈到了嵌套路由，但我认为这不是我的情况。我需要在 Navbar 组件中声明新路由吗？我有点困惑，为什么我不能在导航栏中单独拥有链接组件，或者只是将我想要的页面推送到历史记录。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

好的，所以你只需要从 react-router-dom 导入我们称之为链接的东西。
然后你可以使用 Link 作为“锚”标签

import {Link} from 'react-router-dom'
 <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </nav>

【讨论】：

谢谢！使用标签而不是将其推送到历史记录中是否有好处，history.push('/some/path')？
@BigSteve history.push('/some/path') 用于实用导航，例如在完成 API 请求后，link 用于仅用于导航的按钮。

【解决方案2】：

在 App.js 中，您可以使用 switch

<BrowserRouter>
    <Switch>
        <Route path="/" component={Home}/>
        <Route path="/contact-us" component={ContactUs}/>
        ....
    </Switch>
</BrowserRouter>

在 Navbar.js 中你可以有导航

<div>
    <Link to="/">Home</Link>
    <Link to="/contact-us">Contact us</Link>
    .....
</div>

【讨论】：

谢谢！并且整个 App.js 应该包装在 BrowserRouter 中？
routes 需要包含在 BrowserRouter 中（请参阅我的更新答案）
标签是否需要包含持有标签的子组件？
@BigSteve 不，<route> 和 <link> 元素都需要在 <BrowserRouter> 元素内。
难道和可以在内部通过组件的组合吗？和组件是否可以在一个组件中，该组件是具有标签的组件的子组件？