0

I have App.js with route

<Route path="/home" component={() => <Home changeAuth={this.changeAuth} auth={auth} />}/>

But when i use component to display modal with:

<Link to="/home/info"> <span class="logout">App Info</span></Link>
<Route path="/home/info" component={Info} />

Component was re-render and run componentDidMount. It's not when i use <Route component ={Home}/> but i want using props.

Trần Mạnh Cường
  • 49
  • 1
  • 5
  • Can you make a jsfiddle, unable get your problem? – Sivadass N Apr 07 '18 at 04:50
  • Possible Duplicate of [passing-custom-props-to-router-component-in-react-router-v4](https://stackoverflow.com/questions/44255415/passing-custom-props-to-router-component-in-react-router-v4/44255850#44255850) – Shubham Khatri Apr 07 '18 at 05:03

1 Answers1

0

You should use Route render prop, not component in this case:

<Route path="/home" render={() => <Home changeAuth={this.changeAuth} auth={auth} />}/>

PS: this depends on the version of react-router that you are using, so I'm assuming you are using v4

From the Route Component Documentation:

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).

Thales Gaddini
  • 148
  • 8