当 url 匹配相同的路由时，React 路由器不会重新加载页面

Question

我有以下路线。当我在/createtest页面上并history.push(/createtest/some-test-id)匹配相同的路由组件时，它不会重新加载。有什么聪明的解决方案吗？或者我需要检查match参数并实现重新加载的逻辑？

（反应 16，路由器 v4）

<Route path="/createtest/:testid?/:type?/:step?/:tab?" render={(props) => <CreateTest user={user} {...props}/>}/>

Answer 1

您可以为key组件提供 URL 参数，以便在 URL 参数更改时创建一个全新的组件。

<Route
  path="/createtest/:testid?/:type?/:step?/:tab?"
  render={props => {
    const {
      match: {
        params: { testid, type, step, tab }
      }
    } = props;
    return (
      <CreateTest
        key={`testid=${testid}&type=${type}&step=${step}&tab=${tab}`}
        user={user}
        {...props}
      />
    );
  }}
/>;