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).
Related
history.push({
pathname:
vaccineTaken == "Yes" ||
(vaccineTaken == 1 ? "/vaccination" : "/no-vaccine"),
state: data,
onCancel: getExistingSurvey, // This is function
});
the attribute get cleared after reloading the tab, i have tried to do
state:{ onCancel: getExistingSurvey}
but it gives an error
this is happening because when you reload, you are directly calling the route. which in turn will not have the history object from before the reload.
it is a bad practice to put state in history. use Proper State management like redux or react hooks.
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
I have the following route:
<Route path="/cases" component={Cases} />
This route handles the following example paths
/cases
/cases/1
I have an iframe in this route that is responsible for handing all user interactions. On a location change in the iframe, the iframe posts a message to the parent window notifying it that the url has changed.
I want to be able to change the route in the parent window without re-rendering the iframe.
This is my current solution
this.props.history.replace(pathnameFromIframe);
shouldComponentUpdate = () => {
return false;
}
This solution works but it goes against the React docs:
shouldComponentUpdate ... method only exists as a performance
optimization. Do not rely on it to “prevent” a rendering, as this can
lead to bugs.
https://reactjs.org/docs/react-component.html#shouldcomponentupdate
Can I solve this some other way?
Is it perhaps possible to change the route without adding the route as a prop in the component? This would solve the problem I believe.
i think hashHistory what u need? if im not mistaken
import { hashHistory } from 'react-router';
hashHistory.push({
pathname:"/url-url",
});
I'm trying to build a React app, and getting some trouble with React Router.
First of all, my url always has some weird hashstring at its' end.
For example:
http://localhost:3000/#/?_k=gb3epe
Also, I'm not sure whether the hashtag in the url and the following gibberish are part of the same problem or if they're related to 2 different problems. (I'm currently using React-Router v1.0).
Secondly, I think that the weird URL is preventing me from using the "action" property on forms, and would also like to know if there is a better way to move around React renders then relaying on forms.
Thanks.
If we're talking about react-router v1.0, then to remove this hash string you should pass a { queryKey: false } parameter to the createBrowserHistory function.
var createBrowserHistory = require('history/lib/createBrowserHistory');
ReactDOM.render(
<Router history={ createBrowserHistory({ queryKey: false }) }
routes={ ReactRoutes } />,
document.getElementById('some-container')
);
To move between routes react-router provides Link component which you can use inside your components.
I have a container div with some static HTML. I don't want my react router to do anything if default location is /. It expects a default view which I don't have. Is there an easy solution.
I tried this but it doesn't work with back/forward browser button?
var initApp = function() {
Router.run(routes, function(Handler) {
if(Router.HashLocation.getCurrentPath() !== '/') {
React.render(<Handler/>, document.getElementById('top-container'));
}
});
}
Seems hacky to suggest - but have you tried passing a mocked component (not inheriting from React.Component) with a no-op render: function() {}? Otherwise, I think React will replace your wrapper's innerHTML.
On the other hand - are you rendering server-side? If so, the output of a "dumb" component handler for '/' which prints the same markup as your container currently holds, would quite literally be static HTML anyway, despite being rendered by React.