Javascript 如何使用React Router重新渲染组件<；链接>；指向相同的URL

为了简单起见，detail页面根据URL中的电影ID获取挂载数据，该ID来自路由中的path='movie/：ID'

它的子项称为“推荐”，它会根据当前URL再次显示您推荐的电影

class MovieDetailPage extends React.Component {

    // Fetch movies and cast based on the ID in the url
    componentDidMount() {
        this.props.getMovieDetails(this.props.match.params.id)
        this.props.getMovieCast(this.props.match.params.id)
    }



    render() {            
        <div>
          Movies here
        </div>
        <Recommended id={this.props.match.params.id}/>
    }
}

class MovieDetailPage扩展了React.Component{
//根据url中的ID获取电影和播放
componentDidMount（）{
this.props.getMovieDetails（this.props.match.params.id）
this.props.getMovieCast（this.props.match.params.id）
}
render（）{
这里的电影
}
}

推荐的组件也会基于当前电影获取数据，并生成指向其他电影的另一个标记

class Recommended extends React.Component {

    componentDidMount() {
        this.props.getRecommended(this.props.id)
    }

    render() {
        return (
            <>
            <Category title={'Recommended'}></Category>
            <div className="movies">
                {   
                    this.props.recommended.map((movie) => {
                        return (
                            <Link key={movie.id} to={`movie/${movie.id}`} className="movies__item">
                                <img
                                    key={movie.id}
                                    src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} 
                                    className="movies__item-img"
                                    alt={`A poster of ${movie.title}`}
                                >
                                </img>
                            </Link>
                        )                      
                    })
                }
            </div>
            </>
        )
    }
}

类建议扩展React.Component{
componentDidMount（）{
this.props.getRecommendated（this.props.id）
}
render（）{
返回(
{   
此.props.recommended.map（（电影）=>{
返回(
)                      
})
}
)
}
}

现在，当单击在推荐组件中生成的链接时，如何触发父组件的另一个渲染？URL正在更改，但这不会像我打算做的那样触发渲染

更新：

<Route 
  path="/movie/:id" 
  render={(props) => (
  <MovieDetailPage key={props.match.params.id} 
  {...props} 
  )}
/>

(

这次我传入了一个唯一的键，它触发了页面的重新呈现。我以前尝试过这个，但我可能把语法搞砸了

这篇文章让我找到了正确的方向：

为页面添加一个键 如果您更改了路由，但您的页面未获取其“装载”数据，则应向该页面添加一个密钥。这将导致您的页面重新加载，并使用新id装载，然后再次获取数据

您可以阅读更多有关react键的信息

键告诉react这是一个特定的组件，这就是您在列表中看到它们的原因。通过更改页面上的键，您告诉react这是该组件的新实例化，并且已更改。这将导致重新装载

类组件示例

类MyPage扩展了React.Component{
componentDidMound（）{
//这将在每次密钥更改时触发，因为它会触发装载
}
render（）{
返回(
{/*组件材料*/}
)
}
}

功能组件示例

constmypage=（道具）=>{
React.useffect（（）=>{
//这将在每次键更改时激发
}, []);
返回(
{/*组件材料*/}
)
}

您可以在建议的组件中添加另一个React lifecycle方法，该方法在接收新道具时触发（不安全的组件将接收道具、组件更新、getDerivedStateFromProps），如下所示：

UNSAFE_componentWillReceiveProps(nextProps) {
  if (nextProps.id !== this.props.id) {
    nextProps.getRecommended(nextProps.id);
  };
}

还可以向组件添加关键点（如果关键点更改，则强制组件完全重新渲染），如下所示：

UNSAFE_componentWillReceiveProps(nextProps) {
  if (nextProps.id !== this.props.id) {
    nextProps.getRecommended(nextProps.id);
  };
}

您还可以使用React挂钩，通过useEffect更轻松地处理此问题：

const Recommended = (props) => {
  const { id, getRecommended, recommended } = props;
  useEffect(() => {
    id && getRecommended(id);
  }, [id]);

  return (
    <>
      <Category title={'Recommended'}></Category>
      <div className="movies">
        {recommended.map((movie) => {
          return (
            <Link key={movie.id} to={`movie/${movie.id}`} className="movies__item">
              <img
                key={movie.id}
                src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`}
                className="movies__item-img"
                alt={`A poster of ${movie.title}`}
              ></img>
            </Link>
          );
        })}
      </div>
    </>
  );
};

const推荐=（道具）=>{
const{id，getRecommended，recommended}=props；
useffect（（）=>{
id&&GetRecommendated（id）；
}，[id]）；
返回(
{推荐的.map（（电影）=>{
返回(
);
})}
);
};

---

注意：将密钥添加到组件并完成其重新渲染不是最佳做法，您应该使用组件的生命周期来避免它（如果可能）

您可以对此进行扩展吗？我不确定如何将密钥添加到MovieDetail组件。我是通过这样的路径传递此密钥：还是其他路径？我可以重新渲染推荐的组件是通过传递一个键来实现的，但我的目的是让父组件在单击子组件中生成的链接时再次呈现。页面组件的道具中应该有一些细节。其中之一是url或至少是：id。也可以使用它将键添加到顶级组件。如果我不知道，请原谅，我是反应仍然很新，但我认为你无法将道具从子组件传递到父组件？我猜我应用程序中的顶级组件是a类组件，其中包含BrowserRouter和所有路由。我确实可以访问新路径，但我不知道如何传递该道具并基于该道具创建密钥。唯一的方法是“works”现在是我手动刷新页面，因为我的URL在点击一部电影时会发生变化，因此在刷新和上架时会相应地进行绘制。没关系！再次尝试做基本相同的事情，这次效果非常好！我更新了我的帖子。谢谢你的帮助。嘿，干得好！！这正是我的意思.对不起，我没有解释清楚。

const Recommended = (props) => {
  const { id, getRecommended, recommended } = props;
  useEffect(() => {
    id && getRecommended(id);
  }, [id]);

  return (
    <>
      <Category title={'Recommended'}></Category>
      <div className="movies">
        {recommended.map((movie) => {
          return (
            <Link key={movie.id} to={`movie/${movie.id}`} className="movies__item">
              <img
                key={movie.id}
                src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`}
                className="movies__item-img"
                alt={`A poster of ${movie.title}`}
              ></img>
            </Link>
          );
        })}
      </div>
    </>
  );
};