React Router re-render same component

Question

Problem:

Have async route that get param movie from it and return Movie Container (component). The problem is when I go from one MovieContainer to another MovieContainer (just same route, but with diff. params) my router unmount and re-render MovieContainer component. But it should just pass new props and don't touch my component lifesycle. How to solve it ? What I do wrong ?

Code:

Router

<Route path="/" component={AppLayout}>
 <IndexRoute components={{ children: Home }} />
 <Route path=":movie/about" getComponents={(nextState, callback) => {
 window.scrollTo(0, 0);
 const movie = findMovie(nextState.params.movie);
 return callback(null, { children: (router) => <Movie movie={movie} router={router} /> });
 }}/>
 ....
</Route>

Component WillMount in Movie component

 componentWillMount() {
 console.log('MOUNT MovieContainer');
 }

UPDATE: OK, Done some experiment.

Replace

return callback(null, { children: (router) => <Movie movie={movie} router={router} /> });

With

return callback(null, Movie);

Andd Movie component not re-renderd. Just updated. It's great! But how to pass props now ?

• Andy Ray: This is correct and desired behavior. New routes should re-mount all components.
• nl pkr: @AndyRay but it's not new route, just /movie1/about to /movie2/about This route pattern /:someparams created only for passing new props to the same component. So, why it should re-render ?
• Andy Ray: That is absolutely a new route.
• nl pkr: @AndyRay ok, for example I have an app where I watch movies and have side bar that changes when my router changes like /movie/menu /movie/actors. And you try to tell me that it's OK that my movie will be re-renered every time when I just change my sidebar ?

Answer 1

Great! Finally I found solution.

<Route path=":movie/about" getComponents={(nextState, callback) => {
 window.scrollTo(0, 0);
 callback(null, Movie);
}}
/>

And in component I can access props via this.props.params.movie than find movie in constructor/componentWillMount const movie = findMovie(nextState.params.movie);