Nav-bar consistency error.

[MrJoy]

When going to https://www.reactrails.com/ and clicking Test React Router ('/react-router'), the navigation bar entry for React Router Demo remains selected. When loading https://www.reactrails.com/react-router directly, it is not.

I'm not sure which behavior is the intended one, but the inconsistency suggests a bug.

[justin808]

@MrJoy I agree. Can you take a look and let me know what you find?

[justin808]

If anybody sees this issue, it's a great way to try adding a contribution to this project.

[justin808]

@bluemihai did you want to submit a PR?

[ramrudra]

@justin808 What is the intended behaviour here?

Current:
Test React Router ('/react-router'), the navigation bar entry for React Router Demo remains selected.

Is this the intended behaviour?
React Router Demo menu item should be active when visiting '/react-router'

[justin808]

@ramrudra

• when you click the link for the home page (/) and then go to click the link for Test React Router ('/react-router'), you see the highlight of react-router stays
• but not if you go to the second directly, say from a bookmark

[ramrudra]

@justin808 That's correct. Is that the intended behaviour? if not what is the intended behaviour?

[iamfaizanahmad]

@justin808 I am working on this one.

[mdiaz00147]

@justin808 I'd like to try on this one. May I? I'm applying for upwork position as well thx

[tahsin352]

@justin808 in react router 4, first, need to import withRouter like: import {withRouter} from 'react-router-dom'; then we can get the current path this.props.location.pathname

we can match it and then add 'active' class to respective menu item. thx.

[justin808]

Please link to a PR if you want to suggest some fix.

I'm more eager to get the webpack configuration updated and make a sensible configuration for hot reloading.

[Sirbuland]

@justin808
Looks like it is working fine.

[tahsin352]

Please link to a PR if you want to suggest some fix.

I'm more eager to get the webpack configuration updated and make a sensible configuration for hot reloading.

@justin808 sorry, i might be wrong, but it i guess it is problem with routing, it has nothing with hot-reloading, coz, hot-reloading is a solution to display any update made to any component on the page. but here we are fixing the routing issue. we can use NavLink from react-dom-router. you can see this example for reference : https://codeburst.io/getting-started-with-react-router-5c978f70df91 . it can be done with webpack also. thx.

[dreamsoftech]

@justin808 When I debug to fix this issue, I found some interesting thing. There are duplicated providers.

To fix this issue, I tried to remove NavigationBarApp in clientRegistration.jsx.
It fixed this issue but replicates console error. Since I am not familiar with this code, I need to discuss something with you.

[ahangarha]

This issue is already resolved.