React Router and passing props

Question

ReactDOM.render(  
  <Provider store={store}>    
      <BrowserRouter>
        <Root />
     </BrowserRouter>
     </Provider>,
  document.getElementById('root')
);

Here is Root.js:

 class Root extends Component {

        componentDidUpdate(prevProps) {      
          if (this.props.location !== prevProps.location) {
           // this.onRouteChanged();
          }
        }
        render(){
            console.log("Router Render")
                return (

                            <div>
                                <Header/>
                                <Route exact path="/" component={Login} />
                                <Route  path="/tabs" component={Tabs} />
                            </div>

                )
        }
    }



    export default withRouter(Root);

I have my Header component at the top of the my site.And I want my Header component to always stay top whenever Routes change. But I want to pass props to my Header Component while Routes are changing.

For example I am at the main Route( path="/") at the start.And I want to pass prop to my Header component( <Header locationinfo="main" /> ).

And if I change the route to "path="/tabs" I want to pass another prop value to my Header component(<Header locationinfo="tabs />)

What is the best practice for that case?

Grzegorz Wodniczak Grzegorz Wodniczak · Accepted Answer · 2018-01-14T19:45:19

Use render prop instead of component.

More info: https://reacttraining.com/react-router/core/api/Route/render-func

<Route exact path="/" render={() => {
  <div>
    <Header locationinfo="main" />
    <Login />
  </div>
}} />
<Route path="/tabs" render={() => {
  <div>      
    <Header locationinfo="tabs" />
    <Tabs />
  </div>
}} />

React Router and passing props

2 Answers