react-router-dom Link 不转到页面内容

Question

当我在 Nav.Link (Reactstrap) 中使用时，React router 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>

Answer 1

你不应该混合使用 Nav.Link 的 href 和 React Router 的 to.

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

从 Reactstrap 导入 NavLink 并将属性 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>

react-router-dom Link 不转到页面内容

react-router-dom Link doesn't go to page content

javascript

reactjs

react-router

react-router-dom

reactstrap