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

Question

我有一个标题组件，它在一个单独的 .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 文件中有路由路径详细信息。

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

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

谢谢

标签： javascriptreactjsreact-router

Answer 1

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

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