I have defined the routes in client.js as below, it works perfectly and i need to pass a JSON, so i tried passing as query parameter.
<Router history={appHistory}>
<Route path="/" component={Login}></Route>
<Route path='/login' component={Login}></Route>
<Route path="/user" component={Home}></Route>
</Router>
In login component i am changing the route as below,
hashHistory.push({
pathname: '/user',
query: { JSONResp: JSON.stringify(result.data)}
});
Its working fine, i am able to access the query params.
Is there any option to hide this query value from URL and also my JSON response size will be around 2MB is it advisable to pass this data in query parameter.
Run history.pushState(null,null,window.location.href.split('?')[0]), Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser.
Related
I'm trying to do something like this
<Switch>
<SomeNavBar>
<Route path="page1">Page 1</Route>
<Route path="page2">Page 2</Route>
<Route path="page3">Page 3</Route>
</SomeNavBar>
<OtherNavBar>
<Route path="admin">Admin Page</Route>
</OtherNavBar>
</Switch>
Where I have wrapper component for a routes that are not the admin page.
However the admin route does not render Admin Page it just renders a blank page. The other routes work fine.
Is there a way to achieve this behavior?
There's a couple of issues with your example not related to the question which you should rectify before anything else.
The first is that the direct children of a Switch must always be a Route or Redirect - it doesn't know what to do with any other element and will just render the first thing it sees (in your case, the SomeNavBar component). The second is that path declarations must be prepended with a slash for the router to build them correctly, so /page1 and /admin for example.
With that out the way, here is a somewhat contrived example of how to get the behaviour you are after. For the pages, we are checking from a list of possible fragments before rendering SomeNavBar and the correct route. Notice also the exact parameter - this is so we don't also match paths that only begin with the specificed fragment, like /page1foo:
<Switch>
<Route exact path={['/page1', '/page2', '/page3']}>
<SomeNavBar>
<Route path="/page1">Page 1</Route>
<Route path="/page2">Page 2</Route>
<Route path="/page3">Page 3</Route>
</SomeNavBar>
</Route>
<Route path="/admin">
<OtherNavBar>
Admin Page
</OtherNavBar>
</Route>
</Switch>
I am using react-router v3
i have few dropdowns on home page and button to move on product page.
when user again come back to home page it should display same value which user had selected. but some how it reload all values.
Is there any way using which i can preserve value easily using react-router ?
<Route path="/" component={Main} />
<Route path="product" >
<IndexRoute component={Product}/>
<Route path="offer">
<IndexRoute component={OfferForm} />
<Route path="confirm" component={OfferConfirm}/>
</Route>
<Route path="immediate">
<IndexRoute component={ImmediateOrderForm} />
<Route path="confirm" component={OfferConfirm}/>
</Route>
</Route>
</Route>
You can pass value while redirect or navigate to another page using params and you can get it there in the Component.
<Redirect to={{ pathname: '/url', params: { name: edit } }} />;
get the value like below in home page
let name = this.props.location.params.name;
You can use history like below but I think both are same. Anyway you need to pass all the values to the relevant router page while calling.
this.props.history.push({
pathname: '/url',
params: { name: edit }
});
Hope this will help . I dont think you can do it directly using react router.
You need to store choosen settings in localStorage and restore them on reloading page. You can use redux and redux-persist for this.
You can also use the saved (shared between pages) values on the details page for 'see also similar ...' section. It seems it can be done inside details query but I'd do it in a separate query (highly dynamic) - the detail view (main query) can be SSR-ed (with/without default similarities) which can be updated with fresh data after rehydrating/mounting/initial render.
I got a problem with rendering nested routes with react-router v4. Whenever I type bla-bla.com/userId/postId into my browser's adress bar nothing gets rendered, however when I go to bla-bla.com/userId and then click on a link to a post and get redirected to the post's route everything works fine and I see the post's page. When I type '/:userId/:blogId' manually I see contents of my index.html file inside bundle.js, which causes the error. What can I do to make '/:userId/:blogId' route accessible without having to go to '/:userId' first? That's how I render it on the server:
app.use('*',(req,res) => res.sendFile(path.resolve(__dirname, '..', 'public', 'index.html')));
Route config:
<Switch>
<PrivateRoute component={Users} exact={true} path={'/users'}/>
<PrivateRoute component={BlogPage} exact={true} path={'/:userId/:blogId'}/>
<PrivateRoute component={UserPage} exact={true} path={'/:userId'}/>
</Switch>
The reason it didn't work was that I tried to access bundle.js from index.html like src="./bundle.js" which caused the client to take it from '/userId/bundle.js' when I typed any nested url manually. When I hardcoded the path to the bundle into index.html like so http://localhost:8080/bundle.js it fixed the problem.
I have my component "messages" and i am calling it using two different urls .when i click on first link say 'messages/1' it will load my messages inbox and i have another url 'messages/5/1' for which the component is same as for above url.when page got loaded using 'messages/1' url and when i clicked on some field which points to 'messages/5/1' .It changes the url in the header but it is not reloading the page.
i want to reload my component whenever there is different url even though they have same component .Is there any way to do this.
You can load the same component under different urls and it should load everything fine. Just change the path prop and add the same component you want under the component prop.
render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Message}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
</Router>
), document.body)
edit:
You can try and use rect-router's refresh method
from https://github.com/reactjs/react-router/blob/v0.13.3/modules/createRouter.js#L435-L437
refresh: function () {
Router.dispatch(location.getCurrentPath(), null);
},
I have a particular situation where I would like to load a different route rather than the initial request route while keeping the app universal/isomorphic.
So I have some routes like so
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="potato" component={Potato}/>
<Route path="apple" component={Apple}/>
</Route>
</Router>
On the initial request of / the server decides based on some other information elsewhere what other route should be loaded instead, ie the apple route should be rendered instead but the url on the front end should remain /
At first this is quite trivial as you can just change the url provided to match
match({ routes, location: url }, (error, redirectLocation, renderProps) => {
However, the client first displays correctly then a few seconds after it loads the original request route rather than what the server decided.
It would display an error like this
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
This makes sense as I told the server to render the /apple when the / route was hit. But when it gets to the client side it goes 'Um the route is / but the markup is showing something different to what should be there.
So is there anyway I can fool the client that everything is well and correct?
One solution is just do a 301 redirect but this means the client side
will end up showing /apple rather than just / in the url
I'd like to avoid a 301 for SEO and to keep the initial url route that the user typed
Any solution for this bonkers request?
I'm using
react:15.0.2
react-router: 2.4.0
react-redux:4.1.2
redux: 3.1.2
You can define the routes on the server before calling match and let the client pick them up on the client.
Something like this on the server:
function getRoutes(something) {
if (something === 'apple') {
return (
<Route path="/" component={Apple}>
<Route path="potato" component={Potato}/>
</Route>
);
}
return (
<Route path="/" component={App}>
<Route path="potato" component={Potato}/>
<Route path="apple" component={Apple}/>
</Route>
);
}
const routes = getRoutes('apple');
<script dangerouslySetInnerHTML={{__html: `window.__INITIAL_ROUTES__ = ${routes}`}}></script>
<Router history={createMemoryHistory()}>
{routes}
</Router>
...and on the client:
const routes = window.__INITIAL_ROUTES__;
<Router history={browserHistory}>
{routes}
</Router>