How do I pass props down from react-router-doms's render?

Question

I am aware that to pass down props to my Routes I need to use the render. For example:

const BaseRouter = (props) => (

    <div>
        {console.log(props)} // this displays everything I need, including props.username
        <Route exact path='/room/' render={(props) => <Room {...props} />} />
    </div>
);

The problem is that inside my Room component, the only props passed down are history, location, and match (these come straight from react-router-dom).

I have also tried manually passing the props needed down:

<Route exact path='/room/' render={(props) => <Room {...props} username={props.username} />} />

But inside Room, I still get undefined for props.username. Any ideas?

Answer 1

You need to give a different name to you variables. Doing render={(props) => <Room {...props} /> will always pass the router props, that is why props.username is undefined.

const BaseRouter = (props) => (

    <div>
        <Route exact path='/room/' render={(routeProps) => <Room {...routeProps} {...props} />} />
    </div>
);

Answer 2

Route component takes children as well.

 const BaseRouter = (props) => ( <div> {console.log(props)} // this displays everything I need, including props.username <Route exact path='/room/'> <Room {...props}/> </Route> </div> );

In Room component you can use useHistory, useLocation and useRouteMatch hooks. If Room is class based component then withRouter HOC is also useful.