I need to know how react-router-dom persists state object, for example i have a route like this: 'http://localhost:3000/somepath/123', if i open this route on the new browser tab, state object is obviously undefined, if i redirected from somewhere to this route then state is an object from application state, this is completely normal... but the thing is, when i redirected from different route and i refresh the page several times the state is again an object, how react persist state even if i refresh the page?
<Link
to={{
pathname: '/somepath/:someid',
state: state.obj[someid]
}}
>
Link to somepath
</Link>
React-router-dom doesn't persist state. Browser does.
React router uses history API to push & pop states.
The behaviour you describe is how history.state works.
So after you refresh, browser keeps the history state.
Check History API
Related
navigate(`/dashboard`, { state: { stringData: "smart warehouse", id: passData } });
Iam using this method to pass datas to dashboard(parent route) and dynamically rendering some functions
refreshing with on the current dashboard its not losing data. but if we navigate to another page( to the child route)
making a refresh the 'state' data is losing and cant make execute function with using the state data
my route looks like
<Route path="/dashboard/" some elements...>
<Route.....elements />
<Route.....elements />
<Route.....elements />
</Route>
Iam using react-router and react. please suggest me some methods to do tgis functionality
I am trying to send params through state to <Link> tag and trying to access that params in next component which will be opened in new tab. But while accessing params it says undefined.
The way I call Post detail screen and pass params through state:
<Link
to={{
pathname: `/post/${props.post.slug}`,
state: {post: props.post}
}}></Link>
The way I am accessing params in PostDetail.js component.
const post = this.props.location.state.post;
It says post is undefined. So how can I achieve this?
If I try to this in single page flow, it will work(even if you refresh page). But when I try to open post detail in new tab, it gives error!
Note: ignore pathname and its value in above example!
I'm using react-router-dom of version 4.2.2.
In my application, I have two pages.
I'm using Link to redirect and I'm passing state while coming from 2nd page to 1st page to show notification.
<Link
to={{
pathname: '/page1',
state: { success: true }
}}>
Based on success state, I decide to show notification.
After coming back to page1, if I refresh that page, I keep seeing notification because react-router state is not cleared. I just want to show notification when I come back to page1 from page2. So how do I clear react-router state without redirecting to the same path?
How do i solve this problem?
I am using react-router 2.4.0 and I am trying to pass in some state to my route on a click event. It passes in pathname and query correctly but state is null.
Below is my handler function
clickHandler: function() {
var navigate = { pathname: '/view/report',
query: { filter: "filter-val"},
state: {"field": this.state.field}
}
this.props.router.push(navigate);
In my component that renders the route, inside getInitialState I am trying to access the state but it comes up as null.
I logged the this.state.field and it is present after the button press but before routing. I also logged this.props.location inside thegetInitialState of the routed component and it has non-null values for things like query, pathname, etc. but state (this.props.location.state to be specific) shows up as null.
Is there something special I need to do to set an object inside state of the router's location?
v2.4.0 is an old version. While I'm not aware of any reason why this would be causing your error, it might help to try upgrade to v3 (just v2 with v1's deprecated code removed).
I have sign in component, which should be available for unauthenticated users. And right after the authentication this component should become unavailable.
var routes = (
<Route handler={App}>
<Route name="signIn" handler={signIn}/>
{/* redirect, if user is already authenticated */}
{ localStorage.userToken ? (
<Redirect from="signIn" to="/user"/>
) : null
}
</Route>
);
Router.run(routes, (Handler, state) => {
React.render(<Handler {...state}/>, document.getElementById('main'));
});
This code works perfect if user have reloaded webapp for any reason after the authentication, but of course it doesn't if user didn't reload the webapp.
I've tried to use this.context.router.transitionTo right to the SignUp component, but it works awful - the component gets rendered, then this script is getting executed.
So I want to add the redirect right into the routes variable to make the router redirect without even trying to render the component.
Instead of checking your auth-flow and conditionally rendering particular routes, I would recommend another approach:
If you're using react-router 0.13.x, I would recommend using the willTransitionTo methods on your components when you need to check authentication. It is called when a handler is about to render, giving you the opportunity to abort or redirect the transition (in this case, check if user is authenticated, redirect to another path if not). See auth-flow example here: https://github.com/ReactTraining/react-router/blob/v0.13.6/examples/auth-flow/app.js
For versions >0.13.x, it would be onEnter and Enterhooks. See the auth-flow example here: https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js
Basically you move the auth-check flow away from your routes variable, and into transition events/hooks. Before the route handler actually gets rendered, check the auth, and redirect the user to another route.