NavLink and React Router - results in complete site reload

See original GitHub issue

Issue description

Hello, i have a problem with the combination of react router and reactstrap. Routing does not work properly when you create a link without the <Link to="XXX"> method. When I use reactstrap the entirely site reloads its content.

  • version reactstrap@4.0.1 react-router@3.0.1 ( additionally use react-router-redux@4.0.7)
  • components: NavLink, maybe others with href attribute

Steps to reproduce issue

  • create a simple react-router
  • add two or more subpages
  • create a nav with two links (one with NavLink and one with Link)

Example:

<Nav className="mr-auto" navbar>
   <NavItem>
      <NavLink href="/">Home</NavLink> // does not work
   </NavItem>
   <NavItem>
      <Link to="/another-site">Another Site</Link> // work as expected
   </NavItem>
</Nav>

Resulting html from NavLink (reactstrap) and Link (react-router):

<a href="/" class="nav-link">Home</a>
<a href="/another-link">Another Link</a>

I could use the Link component and add manually the className="nav-link" but it would be great if you can provide me a better solution for this problem.

Thanks in advance Dennis

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:12
  • Comments:19 (3 by maintainers)

github_iconTop GitHub Comments

229reactions
eddywasherecommented, Jan 19, 2017

I don’t think this is in docs yet but you can do the following: <NavLink tag={Link} to="/somewhere">

Check out the following issue/comment https://github.com/reactstrap/reactstrap/issues/83#issue-168537815 and look at the docs source code as it uses react router and reactstrap in the same way.

9reactions
pietmichalcommented, Jan 28, 2018

FYI using tag prop breaks TypeScript typings.

I’ve applied respective class names to Link component as a workaround to this problem.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to reload the page using React-Router's NavLink?
It will reload the whole page when you click on a link made with <Link> or <NavLink> for the whole application. But if...
Read more >
Using the Link and NavLink Components to Navigate to a Route
React -Router provides the <Link> and <NavLink> components, which allow you to navigate to different routes defined in the application. These navigation ...
Read more >
Using the Link and NavLink Components to Navigate to a Route
React -Router provides the and components, which allow you to navigate to different routes defined in the application.
Read more >
Routing - React by Example
navigating makes the page reload; without caching it can be slow ... import { NavLink, Route, Switch } from 'react-router-dom' import classes from...
Read more >
Routing in React JS with Example [Beginner's Guide]
Server-side routing results in every request being a full page refresh loading unnecessary and repeated data every time causing a bad UX and ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found