How to get all param in React Router v4

Question

I am trying to get dynamic routes from the API. When URL has parameter I send them accross API request and fetch the type and according to that type I am rendering my view.

I want to get the whole param from URL. The URL can be any and have any number of params.

Example URL: http://localhost:3000/type/article

App.js

<Route path="/:view" component={LayoutPage} />

LayoutPage

componentDidMount() {
    this.doLoadView(this.props.match.params);
  }
  doLoadView(url) {
    this.setState({ url: url});
    console.log(url, 'match.params.view');
    this.props.actionLoad(url);
  }

On match.params.view it's giving 'type'. I know because I defined /:view in app.js so the output is only first param. but I want complete param i.e. 'type/article'.

Check this answer, I suppose it will provide you with info on what you expect https://stackoverflow.com/a/52752990/5928186 — Shubham Khatri, Oct 16 '18 at 10:45
If you need just to get "pathname" why u need to use react params at all and not just `window.location.pathname` ? — Maielo, Oct 16 '18 at 10:47
@Maielo That's a way out but I want to know if there is any way in react router — Bhawna, Oct 16 '18 at 10:56
I'm not sure if I'm correct but, why not pass another param if you need two params? (/:view/:whatever) — Ovidiu G, Oct 16 '18 at 11:29
@Bhawna did the answer solve your problem? if you are still having issues we can look into it. Let us know! — c-chavez, Oct 17 '18 at 19:46

score 4 · Accepted Answer · edited Oct 18 '18 at 10:48

React router doesn't work that way. You set up a route with the params that you need and then 'this.props.match.params' gets all the params for you.

If you set a route like this:

<Route path="/:view" component={LayoutPage} />

You are only defining one param, so even if you call:

http://localhost:3000/type/article/myotherparam/andanotherparam/etc/etc2

You will only get type because the Route is only expecting the first param (defined as :view).

If you want to define multiple params you do:

<Route path="/:view/:param2/:param3" component={LayoutPage} />

This way you make sure you have 3 params for example.

Regex and handling unknown number of params

Now, since I suppose you don't know how many params are there going to be, you can use a regular expression to match all the params but you will need some parsing afterwards.

So, you can define your route as:

<Route path="/:view+" component={LayoutPage} />

Call it like this:

http://localhost:3000/type/article/myotherparam/andanotherparam/etc/etc2

and then if you log:

console.log(JSON.stringify(this.props.match.params));

You will get:

{"view":"type/article/myotherparam/andanotherparam/etc/etc2"}

You can then split by /:

this.props.match.params.view.split('/')

And you will get the array of params:

["type","article","myotherparam","andanotherparam","etc","etc2"]

Thanks @c-havez by using + in path is solving the problem and we can use this.props.match.params.view to get the value — Bhawna, Oct 18 '18 at 09:53

How to get all param in React Router v4

1 Answers1