Is there any way to hide the params from the query string in react routing?

reactjs routing react-router-v4 react-router-dom react-routing
Vikas Kumar picture Vikas Kumar · Mar 29, 2019 · Viewed 8.5k times · Source

Is there any way to remove the query string from the url in react application?

this.history.push('component/:id')

I want id to be removed from the browser url while navigation.

Answer

ManavM picture ManavM · Mar 29, 2019

The Redirect and Link components both have an overloaded to prop which can either be the string like you displayed above or an object with the following keys: pathname, search, hash, state. So your Link can become something like

<Link to={pathname: '/component', state: {id: '#id'}} />

However, keep in mind that you will have to modify your Route to no longer require an id as a urlParameter and instead in your component you should use this.props.location.state.id to access the variable.

Related questions

React router v4 redirect when no match

I'm new to react-router (and client side routing in general) so I might be thinking about this all wrong. Sorry in advance if that is the case... Basically just want to implement 3 simple rules: if no user, redirect to '/…

Read More
Next.js Redirect from / to another page

I'm new in Next.js and I'm wondering how to redirect from start page ( / ) to /hello-nextjs for example. Once user loads a page and after that determine if path === / redirect to /hello-nextjs In react-router we do something like: <Switch&…

Read More
How to use "useRouter()" from next.js in a class component?

I was trying to get the queries from my url pattern like localhost:3000/post?loc=100 by using useRouter() from "next/router" and fetching some data using that id from my server. It worked when I used it in a Stateless …

Read More