Reactstrap: Reactstrap NavLink doesn't seem to work with HashRouter?

[gregmacbean]

I have my router configured using HashRouter.

<HashRouter>
        <Switch>
         ...

Now I can navigate directly to a route using http://localhost:3000/#/contact for example.

If I use the Link component from react-router-dom then I can navigate using the link it produces:

<Link to="/contact">Contact us</Link>

Becomes

<a href="#/contact">Contact us</a>

But when I use:

<NavLink to="/contact">Contact us</NavLink>

Becomes

<a to="/contact" class="nav-link">Contact us</a>

Which doesn't work.

What's going on here, am I using it wrong or does it just not work?

Thanks

[ddantzler]

While it's not documented, you have to use <NavLink> as follows with react-router:

<NavLink tag={Link} to="/somewhere">

IE:

import React from 'react';
import { Link } from 'react-router';
import { NavLink } from 'reactstrap';

const Example = (props) => {
  return (
    <NavLink tag={Link} to="/somewhere">
      {props.item.name}
    </NavLink>
  );
};

Reference:
https://github.com/reactstrap/reactstrap/issues/298
https://github.com/reactstrap/reactstrap/issues/83

Perhaps we should add this to the documentation? It seems to come up pretty often.

[mathewgries]

I'm surprised there isn't more to this thread. Has this been added to any docs? If this is necessary for basic functionality, it should be stated in the docs, right?

[dollarsign143]

Fiixed it with hashType="noslash"

<HashRouter hashType="noslash"> <Routes /> </HashRouter>