How to access param in parent component with React Router DOM

Question

My routes are like

<BrowserRouter>
  <App>
    <Switch>
      <Route path="/:locale?" component={Home}/>
    </Switch>
  </App>
</BrowserRouter>

App component is

class App extends Component {
    componentDidMount() {
        if (this.props.match) {
            console.log(this.props.match);
        }
    }
}

I'm getting undefined here. This only works for Home component.

I need some workaround for changing language state according to :locale for every Route. I don't want to do this manually for every route component.

Have you tried using exact keyword before path inside your route? — Sajjad
– Sajjad, Commented Mar 31, 2018 at 15:56
How are you accessing the route? From where you are passing the value of locale? — Sajjad
– Sajjad, Commented Mar 31, 2018 at 16:03
I'm navigating to localhost:3000/en so that props.match.locale should be en. This works if put same code in all routes. I want to get it in App that wraps all of routes as its children. — David
– David, Commented Mar 31, 2018 at 16:06

SrThompson · Accepted Answer · 2018-03-31 15:57:21Z

2

If you don't want to render App inside a Route, you can use the withRouter HOC provided by react-router. In your App component:

import {withRouter} from 'react-router-dom';

class App extends Component {
  ...
}

export default withRouter(App);

answered Mar 31, 2018 at 15:57

SrThompson

5,7582 gold badges20 silver badges25 bronze badges

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

1 Comment

SrThompson Over a year ago

I don't think you can access the locale param since the /:locale? route is being rendered after/inside the App component. You should just set some state in App for the locale. If you want to have locale available everywhere you can use Context

Collectives™ on Stack Overflow

How to access param in parent component with React Router DOM

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related