change Url when component renders with react-router-dom?

Question

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.

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
– ashwintastic, Commented Aug 16, 2017 at 8: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
– Matt Derrick, Commented Aug 16, 2017 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
– Shubham Khatri, Commented Aug 23, 2017 at 11:21

Dragomir Kolev · Accepted Answer · 2017-08-21 08:29:15Z

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.

answered Aug 21, 2017 at 8:29

Dragomir Kolev

1,1081 gold badge10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ashwintastic Over a year ago

dats cool jump to /aUrl mean window.history.pushState('', '', '/aUrl) ??

Dragomir Kolev Over a year ago

yes or in the appRoutes initialise something like { path: '/aUrl', component: Acomponent }

ashwintastic Over a year ago

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 .

Dragomir Kolev Over a year ago

In that case you will need something like state in the router. Maybe have a look at this. npmjs.com/package/react-state-router

Collectives™ on Stack Overflow

change Url when component renders with react-router-dom?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related