如何将自定义道具和历史传递给 Route

Question

How to I get access to the history function when passing custom props to component.

<Route path="/" exact component={<Home prop1={this.state.example}/>}/>

If I try getting the history object in Home component, I can't get to use the history functions. I logged the history object in the console and I can see there's not push or replace functions anymore.

Where as, using this

<Route path="/" exact component={Home}/>

works perfecting except then I can't pass my custom props.

Answer 1

You just need to use the Spread operators and pass your custom props alongside.

 <Route exact path="/" component={props => <Home props={{ data: "check", ...props }}/>}/>

If you console the props inside Home component, you can see the value of data in props.data