Nav-bar consistency error.
MrJoy opened this issue · 14 comments
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.
If anybody sees this issue, it's a great way to try adding a contribution to this project.
@bluemihai did you want to submit a PR?
@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'
- 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
@justin808 That's correct. Is that the intended behaviour? if not what is the intended behaviour?
@justin808 I am working on this one.
@justin808 I'd like to try on this one. May I? I'm applying for upwork position as well thx
@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.
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
Looks like it is working fine.
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.
@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.