Question

我正在尝试为我正在工作的netflix克隆项目中的所有电影项目设置电影项目页面的路由。我的app.js中只有两条路线，其中/和/ movies都在渲染主电影页面，在该页面上渲染了所有组件。我认为我必须为电影项目组件内的电影项目页面动态定义路由，因为我必须将当前电影项目组件正在使用的相同道具传递给自己的电影页面。因此我设置动态路由而不使用任何参数，因为我认为这很容易。一切正常，除了当我将电影标题推到/ movies即/ movies / movieTitle时，电影页面现在也正在呈现，这显然是我不想要的。但是，如果我将app.js中的/ movies设置为精确，则电影“项目”页面将无法渲染。有什么我想念的吗？

https://netflix-clone-by-shivam.herokuapp.com/

//CollectionItem - Item in the grid on /movie page for all the movie items 
I'm receiving from api, onClick links to new page /movie/title 

const CollectionItem = ({title,overview,backdrop_path,name,history}) =>  {
  return (
  <div className="movie-item" 
  onClick={() => history.push(`movies/${title}`) }>
  <Route path={`movies/${title}`} render={(props) => <ItemPage />} />
  ...
  </div>
  )}

//App.js - If I put in exact then the ItemPage wouldn't render.

<div>
  <Header />
      <Route exact path='/' component={Movies} />
      <Route path='/movies' component={Movies} />
</div>

当子路径嵌套在父路径上时，如何不呈现父路径？

0 个答案: