时间戳

首页 > 解决方案 > 如何在 ReactJS 中设置路由？

reactjs - 如何在 ReactJS 中设置路由？

问题描述

标签： reactjsreact-router

解决方案

尝试将<Router>App.js 文件中的更改为：

<Router>
  <div>
    <Nav />
    <Switch>
         <Route exact component={withRouter({About})} path="/about" />
    </Switch>
  </div>

您需要使用exact它，因为它返回任意数量的完全匹配的路由。我添加了 ，switch因为它呈现了<Route>与该位置匹配的第一个孩子。

编辑：您还必须更改您的Nav组件。导航栏中的链接之一的示例：

<li class="nav-item">
      <Link to='/about' class="nav-link" href="/about">About</Link>
</li>

确保包括：import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';在 Nav.js 组件中！

推荐阅读