NavLink and React Router - results in complete site reload
See original GitHub issueIssue 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.1react-router@3.0.1( additionally usereact-router-redux@4.0.7) - components:
NavLink, maybe others withhrefattribute
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:
- Created 7 years ago
- Reactions:12
- Comments:19 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
FYI using
tagprop breaks TypeScript typings.I’ve applied respective class names to
Linkcomponent as a workaround to this problem.