CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-domreactstrap
furkancetkin
furkancetkin

Reputation: 103

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

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>

Upvotes: 0

Views: 333

Answers (1)

nip
nip

Reputation: 1697

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>
  1. Import NavLink from React Router and add the Reactstrap classes manually
<NavItem>
  <NavLink to="/register" className="btn btn-dark btn-lg">Register</NavLink>
</NavItem>

Upvotes: 2

Related Questions