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

Posted 2023-03-23

【中文标题】react-router-dom 链接没有转到页面内容

【英文标题】：react-router-dom Link doesn't go to page content

【发布时间】：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>

【参考方案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>