NavLink and React Router - results in complete site reload

[HD-CMS]

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

[eddywashere]

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 #83 (comment) and look at the docs source code as it uses react router and reactstrap in the same way.

[HD-CMS]

Thanks eddywashere, not found this before in the docs. Thats works perfectly.
Issue can be closed.

[pietmichal]

FYI using tag prop breaks TypeScript typings.

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

[mwq27]

@pietmichal What'd you have to edit to get TS happy again?

[azizur]

@eddywashere thank you for proving this working example.

[piedrucci]

works for me! ty @eddywashere

[levino]

Actually this creates the following html:

<li class="nav-item"></li>
<a class="nav-link">Click</a>

while it should be

<li class="nav-item"><a class="nav-link">Click</a></li>

Breaks Bootstrap CSS.

[TheSharpieOne]

@levino what creates that HTML? You can post the code here or fork this example and add the code there (save it and send post the link): https://stackblitz.com/edit/reactstrap-v6-xr362c?file=Example.js

[sharanagouda]

I have updated react bootstrap to
"bootstrap": "^4.3.1",
"react-bootstrap": "^1.0.0-beta.5",

web page is loading for every link
<Nav.Item>
<Nav.Link href="/" eventKey={1} >Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey={2} href="/about" >About</Nav.Link>
</Nav.Item>

I have tried
<Nav.Link eventKey={2} componentClass={Link} href="/about" >About</Nav.Link> and
<Nav.Link eventKey={2} tag={Link} to="/about" >About</Nav.Link> also but not worked

[stephenbaidu]

@sharanagouda I think you mixed up the repositories. What you posted is for https://github.com/react-bootstrap/react-bootstrap

[geekmers]

I made it work like this in next.js

import Link from 'next/link';

<DropdownItem tag={Link} href="/about" >
    <a className="dropdown-item">About</a>
</DropdownItem>

[rodrigograca31]

This is still not on the docs, and then NavLink behaves diferently from the original one...

[endquote]

I'm trying to set the tag to Next.js's Link from "next/link"and getting warnings like Warning: Failed prop type: Link: unknown props found: onClick, className. But it does actually function correctly.

[TheSharpieOne]

@endquote Check out the docs for next/link: https://nextjs.org/learn/basics/navigate-between-pages/hoc

Link is Just a Higher Order Component (HOC)
Actually, the title prop on next/link component has no effect. That's because next/link is just a higher order component which only accepts the href and some similar props. If you need to add props to it, you need to do it to the underlying component. Do not expect the next/link component to pass those props to it's children.
In this case, the child of the next/link component is the anchor tag. It can also work with any other component or tag, the only requirement for components placed inside is that they should accept an onClick prop.

It seems like Link from "next/link" is not indented to be used as a link on the page. Try not using tag and instead wrap the component in next/link's Link. I believe that is how next/link is intended to be used.

[Mattymoo007]

<Nav>
  <Nav.Link as={Link} eventKey='1'  to='/dashboard'>
    <i class='fas fa-inbox'></i>
    <span>Dashboard</span>
  </Nav.Link>
</Nav>

Using as={Link} I was able to get the link working.

[kwabena53]

<Nav>
  <Nav.Link as={Link} eventKey='1'  to='/dashboard'>
    <i class='fas fa-inbox'></i>
    <span>Dashboard</span>
  </Nav.Link>
</Nav>

Using as={Link} I was able to get the link working.

This works perfectly. Doesn't reload the page. Thanks

[MYK2K]

@endquote Check out the docs for next/link: https://nextjs.org/learn/basics/navigate-between-pages/hoc

Link is Just a Higher Order Component (HOC)
Actually, the title prop on next/link component has no effect. That's because next/link is just a higher order component which only accepts the href and some similar props. If you need to add props to it, you need to do it to the underlying component. Do not expect the next/link component to pass those props to it's children.
In this case, the child of the next/link component is the anchor tag. It can also work with any other component or tag, the only requirement for components placed inside is that they should accept an onClick prop.

It seems like Link from "next/link" is not indented to be used as a link on the page. Try not using tag and instead wrap the component in next/link's Link. I believe that is how next/link is intended to be used.

This is the perfect answer to this. Please check this out!

[geraldkachi]

This is good

[marceloverdijk]

Although @eddywashere post got a lot of upvotes I was not able to get it working with:

import Link from 'next/link'
import { NavItem, NavLink } from 'reactstrap'

<NavItem>
    <NavLink tag={Link} to="/about">About</NavLink>
</NavItem>

as I get the following error:

Error: Failed prop type: The prop hrefexpects astringorobjectin, but got undefined instead.

What did work for me was wrapping the NavLink in Next's Link component as @endquote suggested:

import Link from 'next/link'
import { NavItem, NavLink } from 'reactstrap'

<NavItem>
    <Link href="/about" passHref>
        <NavLink>About</NavLink>
    </Link>
</NavItem>

Note the passHref option.