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?

Answer 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).

Answer 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

Answer 3

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'}
    />
    ...
}

Answer 4

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

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

Answer 5

I do not know why react router cannot detect my filter even though it's working properly, I resolved this problem by using location.pathname since it does the work for me. I think react router cannot detect my filter param because of regexp, I expected that so I put || to use all on root, but unfortunately for me I it cannot detect so I used location.pathname . I would appreciate suggestions on this since I am not sure with my path configuration on regexp.

Answer 6

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