Question

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

我以前处理嵌套的问题是关于嵌套路由的，但是我不认为这是我的情况。我是否需要在Navbar组件中声明新路线？对于为什么我不能只在Navbar中单独拥有链接组件，或者只是推送我要记录的页面，我有些困惑。

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

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

如何在子反应组件内部设置反应路由器链接

2 个答案: