Accepted answer

If i understand correctly what you are trying to achieve is to get the name of the Component / Page you are in dynamically.
If this is the case, you can add a prop called name to the route and grab it inside the component.
For example:

 <Route path="/" name="App" component={App}>
  <IndexRoute name="Home Page" component={HomePage} />
  <Route path="/home" name="Home Page" component={HomePage} />
  <Route path="/about" name="About Page" component={AboutPage} />
  <Route path="*" component={NotFoundPage} />

and inside the component this is how to grab the name:

render() {
// ...
    const currentRouteName = this.props.routes[this.props.routes.length - 1].name;
// ... rest of code


You have to update your all child component to have additional property "title". For ex update Home component as below

Home.title = "HomePage";

export default Home

Now update your routes to pass this info as a prop

<Route component={Layout} onEnter={checkIndexAuthorization(store)}>
     <IndexRoute component={Home} />
     <Route path="/home" component={Home} title={Home.title} />

Now in Layout component you can access this from children props like below



I was just looking at this too - in my application I have private routes which are only available after Authentication, which I only remembered after about 5 minutes of looking at this!

If you are creating private routes in your application, do not forget to pass props to the newly created route component e.g.:

<PrivateRoute path="/path/to/route" name={'Route name'} component={RouteComponent} layout={SimpleLayout} />

And the definition for PrivateRoute:

const PrivateRoute = ({ layout: Layout, component: Component, }) => (
    <Route {} render={props => {
        const newComponent = Layout ? 
             <Layout><Component {} {...props} /></Layout> 
             <Component {...props} />;

        return Auth.isUserAuthenticated() ? (
        ) : (
            <Redirect to={{pathname: '/login', state: { from: props.location }}} />

The important part is remembering to spread to current props onto the new Component {}.

Then in the actual Layout file (eg. SimpleLayout above) you can access the props via:

I'm sure there are still better ways of doing this, but from my experience thus far, this worked ok for me!

Related Query

More Query from same tag