React Router doesn't change the component

Question

I setup React Router but it doesn't work.

I see that URL has changed, I see it in the history of browser. But the page doesn't change.

I want to go to other component which should look like a separate page (not related to the old page, from where I go).

How can I do that?

render() {
  return (
    <Link to={`/details/${this.props.movie.id}`}>
      <div>
        <p>{this.props.movie.title}</p>
        <div>
         <img 
            src={IMG_URL + this.props.movie.poster_path} 
            className='preview'
            alt={this.props.movie.overview}/>
        </div>

        <Route path='/details/:number' component={MovieDetails}/>
      </div>
    </Link>
  );
}

index.js:

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

Answer 1

Your routes should be declared at a higher level, not as a child of a Link

For example in index.js

 <Router>
    <div>
      <Route exact path="/" component={Main} />
      <Route path="/details/:number" component={MovieDetails} />
    </div>
 </Router>