How do you pass a prop to all react routes? (Change title dynamically)

Viewed 647

I am using redux to manage state, so I'm passing state and bound actions from the root component.

I am using react-router-redux's ConnectedRouter, with a switch inside containing all my routes and redirects. And I'm trying to prevent passing a setRouteTitle along with the routeTitle. The router switch is similar to the code below.

<Switch>
  <Route
      exact 
      path="/" 
      component={ Dashboard }
      routeTitle="Dashboard"
      setRouteTitle={ setRouteTitle }
      dashboardState={ state.dashboard }/>

  <Route
      exact 
      path="/gear" 
      component={ Gear }
      routeTitle="Gear Management"
      setRouteTitle={ setRouteTitle }
      gearState={ state.gear }/>

  <Route
      exact 
      path="/users" 
      component={ Users }
      routeTitle="Users Management"
      setRouteTitle={ setRouteTitle }
      usersState={ state.users }/>
</Switch>

It just seems redundant to first pass a function and its parameter for the component to run as soon as it will mount/has props, then second defining it on every single route.

Any way to do this without creating a new component that extends Route or something, or would this be a good idea?

1 Answers
Related