React Router不会更改组件

Question

我设置了React Router，但是没有用。

我看到网址已更改，在浏览器的历史记录中也看到了。 但是页面没有改变。

我想转到其他组件，该组件应看起来像一个单独的页面（与我所处的旧页面无关）。

我怎样才能做到这一点？

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

您的路线应声明为较高级别，而不是Link的子级

例如在index.js中

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