如何使用来自单独组件文件的反应路由器导航链接？答案

【问题标题】：How to use react router navigation links from separate component file?如何使用来自单独组件文件的反应路由器导航链接？
【发布时间】：2020-12-20 15:28:17
【问题描述】：

我有一个标题组件，它在一个单独的 .js 文件中导航。

<Router>
  <h1>AshoKart</h1>
    <div className="cart">
      <span>Cart (0 items)</span>
      <Link to='/checkout'>Checkout</Link>
    </div>
    <br />
    <nav>
      <Link to='/'>Home</Link>
      <Link to='/about'>About</Link>
    </nav>
 </Router>

我在 App.js 文件中有 Route 路径详细信息。

<Router>   
  <Route path="/" exact>      
    <Home />
  </Route> 
  <Route path="/about">      
    <About />
  </Route> 
  <Route path="/checkout">      
    <Checkout />
  </Route> 
</Router>

当我单击链接时，它没有导航。但是，如果我在 app.js 文件中添加导航链接，它就可以正常工作。您能告诉我如何使导航链接从单独的文件中工作吗？

谢谢

【问题讨论】：

去掉组件文件中的<Router>。您的组件已经嵌入到应用程序中

标签： javascript reactjs react-router

【解决方案1】：

删除 Header 组件中的 <router/> 与以下代码相同。它现在应该可以导航了。

<div>
                          <h1>AshoKart</h1>
                        <div className="cart">
                            <span>Cart (0 items)</span>
                                <Link to='/checkout'>Checkout</Link>
                        </div>
                        <br />
                        <nav>
                                <Link to='/'>Home</Link>
                                <Link to='/about'>About</Link>
                        </nav>
    </div>

【讨论】：