How to hide parameters from Route after accessing parameters in reactjs

Question

I have create basic React Application where i have created one component in this. When pattern matches component get loads.

<HashRouter>
    <Route path='/:id1/:id2' component={withRouter(component_name)}/></HashRouter>

When i run application Url looks : http://localhost:4000/#/1/2

Now in my Component i am able to read parameters by this.props.match.params.id1. After reading params from url i want to hide it from url should look like this. http://localhost:4000/#/

Could someone help me out this your valuable answers.

Thanks in advance.

ocespedes · Accepted Answer · 2019-02-28 13:26:12Z

7

Instead of having to remove the params from the url you can pass the using the router state for example if you are redirecting with a link you can do something like

<Link to={{
  pathname: '/',
  state: { params: {id1: value1, id2: value2} }
}}> My Link </Link>

and then in your component that has been routed using the router you can get them like:

this.props.location.state.params.id1
this.props.location.state.params.id2

In this way you avoid the need of having to remove the path params from the url

Update

If you need the url to be matched in the browser you can have an intermediate route that extract the params and then redirect to the right component like:

<Route
   path="/test/:id1/:id2"
   component={({ match }) => {
     return <Redirect to={{ path: '/component-route', state: {...match.params}}} />;
   }}
 />

In this way the router will match the first url and then redirect to another component passing the pass params through the state. In that way you can access the state params like I mentioned above.

Hope it helps

edited Feb 28, 2019 at 13:26

answered Feb 28, 2019 at 12:55

ocespedes

1,3034 gold badges14 silver badges27 bronze badges

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

2 Comments

Sravan Shetty Over a year ago

Thanks @ocespedes.. I have tried this solution. But if i use Link untill we click on that it will not move to the component. As soon as we enter url in the browser it should work. from localhost:4000/#/1/2 to localhost:4000/#. For this how do we define Route. Help me out with our solution

rsp Over a year ago

@SravanShetty were you able to find a solution for this?

Filip F. · Accepted Answer · 2019-02-28 12:34:23Z

0

Links you posted are binded to your local network, therefore noone can open them and see them but you.

answered Feb 28, 2019 at 12:34

Filip F.

1649 bronze badges

1 Comment

Sravan Shetty Over a year ago

ya i just gave sample example for which i am searching for

Collectives™ on Stack Overflow

How to hide parameters from Route after accessing parameters in reactjs

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related