Q:

URL with ID not handled by React Router

I'm using React Router v4 in my ReactJs app and looks like whenever I have a path with an ID in it, React Router is not handling it because I see the page refreshing and I'm losing all the data in my Redux store in the process.
Here's my routes section:
<Switch>
   <Route exact path="/member" component={Home} />
   <Route exact path="/member/accounts" component={Accounts} />
   <Route path="/member/projects/profile/:id" component={ProjectProfile} />
</Switch>

Here's how I'm generating the link. This is the link when the user clicks, I see a refresh on my browser.
import { Link } from 'react-router-dom';

... omitted for brevity
const profileUrl = "/member/projects/profile/" + project.id;

<Link to={profileUrl}>Click here</Link>

Other links defined in my routes work fine e.g. home and accounts.
What am I doing wrong here?

A:

After a lot of testing, I found the cause. We must use NavLink or Link from react-router-dom whenever linking to a component.
I noticed I wasn't consistent in using NavLink in my app. Instead I was using regular
<a href={myModuleUrl}>Module Name</a>.
Once I switched to using NavLink, it worked as intended.

