Question

我设置了React Router，但是它不起作用。

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

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

我该怎么做？

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>

React Router不会更改组件

1 个答案: