时间戳

首页 > 解决方案 > 当 url 匹配相同的路由时，React 路由器不会重新加载页面

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

问题描述

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

（反应 16，路由器 v4）

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

标签： reactjsreact-router-v4

解决方案

您可以为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}
      />
    );
  }}
/>;

推荐阅读