How to get params in component in react router dom v4?

Question

I have this code:

<BrowserRouter>
   <Route  path="/(:filter)?" component={App} />
</BrowserRouter>

the filter param or '' on the root is suppose to be on App components' props base on the previous react router versions?

This is my code on my App:

const App = ({params}) => {
    return ( // destructure params on props
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={params.filter || 'all'} // i want to git filter param or assign 'all' on root 
        />
        <Footer />
      </div>
    );
}

I logged this.props.match.params on console but it has none? help?

Solution 1

I assume you are following the Redux tutorial on Egghead.io, as your example code seems to use what is defined in that video series. I also got stuck on this part trying to integrate React Router v4, but eventually found a working solution not far from what you have tried.

⚠️ NOTE: one thing I would check here is that you are using the current version of react-router-dom (4.1.1 at the time of this writing). I had some issues with optional filters in the params on some of the alpha and beta versions of v4.

First, some of the answers here are incorrect, and you indeed can use optional params in React Router v4 without the need for regular expressions, multiple paths, archaic syntax, or using the <Switch> component.

<BrowserRouter>
  <Route  path="/:filter?" component={App} />
</BrowserRouter>

Second, as others have noted, React Router v4 no longer exposes params on route handler components, but instead gives us a match prop to use.

const App = ({ match }) => {
    return (
      <div>
        <AddTodo />
        <VisibleTodoList filter={match.params.filter || 'all'} />
        <Footer />
      </div>
    )
}

From here, there are two ways to keep your content in sync with the current route: using mapStateToProps or using the HoC withRouter, both solutions are already talked about in the Egghead series so I won't recapitulate them here.

If you are still having trouble, I urge you to check out my repository of the completed application from that series.

• Here is the commit using the mapStateToProps solution
• Here is the commit using the withRouter soluiton

Both of which seem to work fine (I just tested both of them).

Solution 2

React Router v4 does not accept a regex for the path. You won't find regular expressions covered anywhere in the documentation. Instead of a regex you can just create multiple routes inside the <Switch> component and the first one that matches will be rendered:

<BrowserRouter>
  <Switch>
    <Route  path="/" component={App} />
    <Route  path="/:filter" component={App} />
  </Switch>
</BrowserRouter>

You also have a bug in your App component. You get the params via the match property, not the params property (not tested, but this should be closer to what you want):

const App = ({match}) => {
    return ( 
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={match.params.filter || 'all'} 
        />
        <Footer />
      </div>
    );
}

All of the above is covered in the React Router V4 docs on ambiguous matches

Solution 3

I know the question is about v4, but if sm looks for v5, we can use the useParams hook.

// /:filter
const {filter} = useParams();

Solution 4

From the react-router documentation, props.match.params is where your parameteres are stored.

So to access the filter name, try this

const App = ({match}) => {
    ...
    <VisibleTodoList 
        filter={match.params.filter || 'all'}
    />
    ...
}

Solution 5

To get the params in the path URL

//to your route component  
<Route path={`${match.url}/upload/:title`} component={FileUpload}/> 
=====
//Parent component
<Link to={`${match.url}/upload/css`}>  
=====
//Child component  
const {params: {title}} = this.props.match;
console.log(title);

result = css

View more solutions

Comments

[Shubham Khatri]

Possible duplicate of ReactRouter: Can not read property "imageId" of undefined

[gpbaculio]

I want to accept this as duplicate but I am using regexp here, I think it's because of regexp that nothing is passed on my params, I have logged props.match.params but all I get is empty object even though I have a working react router, accessing location pathname does the same for me so I have to do what's necessary in my situation but I would appreciate suggestions since I have to move on with this since I have tried to fix this for hours

[glhrmv]

Remove the regular expression from your Route component. Make it just `Route path="/:filter".

[gpbaculio]

I tried it but It will crash my app, I used that since it's an optional param, but I do not know why react router cannot detect my filter even though it's working, I resolved it using location.pathname since it does the work for me

[glhrmv]

Sorry, I misread the documentation. What about if you do path="/:filter?"?. So no parenthesis but keep the question mark.

[gpbaculio]

just the same. react router won't detect

[nnn]

This is a great solution to get parameters from url without additional code. Thank you!