react-router-dom 链接没有转到页面内容

【问题标题】：react-router-dom Link doesn't go to page contentreact-router-dom 链接没有转到页面内容
【发布时间】：2021-10-01 10:41:35
【问题描述】：

当我在 Nav.Link (Reactstrap) 中使用时，React 路由器 dom 不起作用。它转到 /register 路径，但内容不显示

<Nav.Link className="active"><Link to="/register" className="btn btn-dark btn-lg">Register</Link></Nav.Link>

路径：

<Router>
  <Switch>
    <Route path="/register" render={({ history }) => <Register />} />
  </Switch>
</Router>

【问题讨论】：

标签： javascript reactjs react-router react-router-dom reactstrap

【解决方案1】：

您不应将 Nav.Link 的 href 与 React Router 的 to 混合使用。

这里有两种不同的解决方案：

从 Reactstrap 导入 NavLink 并将 prop tag 设置为 React Router 的 NavLink

import { NavLink as RRNavLink } from 'react-router-dom';
import { NavLink } from 'reactstrap';

<NavLink tag={RRNavLink} to="/register" className="btn btn-dark btn-lg">Register</NavLink>

从 React Router 导入 NavLink 并手动添加 Reactstrap 类

<NavItem>
  <NavLink to="/register" className="btn btn-dark btn-lg">Register</NavLink>
</NavItem>

【讨论】：