9

Is there a way in react router that whenever some components renders the url changes accordingly.

One way which I know is to place window.history.pushState('', '', '/componentUrl'); in the render function of the component

Is there any better way to accomplish it within the route other than path props in Route because path= 'someurl' means whenever someurl is accessed someComponent should render

But in the other way round whenever someComponent renders urls should change to someurl I'm taking this senerio in context of conditional rendering inside a component.

ashwintastic
  • 1,895
  • 3
  • 15
  • 44
  • how are you rendering that component – Shubham Khatri Aug 16 '17 at 07:57
  • I'm rendering different components in a component on the basis of state like if state == 'a' render Acomponent if state == 'b' render `Bcomponent` by this way component is rendering but url is not changing – ashwintastic Aug 16 '17 at 08:26
  • The URL should drive the rendering of components. The app state and components shouldn't drive the URL. I'd instead look at changing the URL to then render this component. – Matt Derrick Aug 16 '17 at 10:12
  • I wouldn't recommend changing the URL when the component is rendered Consider a case where you are rendering this component within nested child of another component, You would change the URL and now suppose you have the same component reused 3 different points then you would be changing the URL from 3 different components which is incorrect. Instead you should let URL drive your component rendering – Shubham Khatri Aug 23 '17 at 11:21

1 Answers1

1

The most important thing to know when using react-router is that:

The path attribute defines the route URL and component attribute defines the component for this route.

I would suggest having a read through this. Best practice suggest, just like Matt Derrick suggested in the comments that the URL should drive the rendering of components.

Since you have Acomponent and Bcomponent that render based on the state I would suggest you then have 2 different URLs to accompany that. So when state changes to be ==='a' then you will jump to /aURL, when the state changes to be ==='b' then you will jump to /bURL.

Hope this answers your question.

Dragomir Kolev
  • 978
  • 9
  • 25
  • dats cool jump `to /aUrl` mean `window.history.pushState('', '', '/aUrl)` ?? – ashwintastic Aug 21 '17 at 10:17
  • yes or in the appRoutes initialise something like { path: '/aUrl', component: Acomponent } – Dragomir Kolev Aug 21 '17 at 10:20
  • this is what I have done , looking for a solution like pass a callback function in the `router` itself which will execute when a component renders , so that this jump url will be handled by the `router` itself . I don't know weather it is possible with `react-router-dom` . – ashwintastic Aug 21 '17 at 10:35
  • In that case you will need something like state in the router. Maybe have a look at this. https://www.npmjs.com/package/react-state-router – Dragomir Kolev Aug 21 '17 at 10:40