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

Question

React router dom doesn't work when I use in Nav.Link (Reactstrap). It goes to /register path but content doesn't display

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

path :

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

Answer 1

You shouldn't mix Nav.Link's href with React Router's to.

Here are two different solutions:

1. Import NavLink from Reactstrap and set the prop tag as React Router's 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>

2. Import NavLink from React Router and add the Reactstrap classes manually

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