时间戳

首页 > 解决方案 > 在路由参数更改时重新渲染相同的组件（react-router-dom）

reactjs - 在路由参数更改时重新渲染相同的组件（react-router-dom）

问题描述

我有这样的代码：

<BrowserRouter basname="/page">
    <Switch>
         <Route path="/test/:id">
              <Page />
         </Route>
    </Switch>
</BrowserRouter>

当我切换/page/test/1到组件时/page/test/2，Page不会重新渲染。我知道componentDidMount不会调用该方法，但我希望Page重新渲染组件。

我怎样才能做到这一点？

标签： reactjsreact-router

解决方案

如果您使用的是 React v16.8 或更高版本，请尝试这样

import React, { useEffect } from "react";

const Page = (props) => {
  useEffect(() => {
    //Your code comes here to fetch the data from API
 }, [props.match.params.id]);

  return (<div>Layout</div>);
}
export default Page;

对于类组件

<Route path="/page/:pageid" render={(props) => (
 <Page key={props.match.params.pageid} {...props} />)
} />

推荐阅读