react-webpack-rails-tutorial icon indicating copy to clipboard operation
react-webpack-rails-tutorial copied to clipboard

Published 20 hours ago • verified publisher icon shakacode

Nav-bar consistency error.

Open MrJoy opened this issue 8 years ago • 13 comments
trafficstars

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.

MrJoy avatar Aug 01 '17 19:08 MrJoy

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

justin808 avatar Aug 06 '17 05:08 justin808

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

justin808 avatar Nov 03 '17 01:11 justin808

@bluemihai did you want to submit a PR?

justin808 avatar Aug 09 '18 18:08 justin808

@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'

ramrudra avatar Aug 26 '18 20:08 ramrudra

@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

justin808 avatar Aug 27 '18 02:08 justin808

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

ramrudra avatar Aug 27 '18 08:08 ramrudra

@justin808 I am working on this one.

faizan0009 avatar Oct 13 '18 22:10 faizan0009

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

mdiaz00147 avatar Feb 20 '19 20:02 mdiaz00147

@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.

tahsin352 avatar Feb 21 '19 09:02 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 avatar Feb 21 '19 22:02 justin808

@justin808 Looks like it is working fine.

screenshot 2019-02-22 at 7 10 30 pm

Sirbuland avatar Feb 22 '19 14:02 Sirbuland

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.

tahsin352 avatar Feb 23 '19 11:02 tahsin352

@justin808 When I debug to fix this issue, I found some interesting thing. There are duplicated providers. image 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.

dreamsoftech avatar Apr 23 '19 01:04 dreamsoftech

This issue is already resolved.

ahangarha avatar Aug 02 '23 18:08 ahangarha