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

您可以将URL参数以key的形式提供给组件，以便在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}
      />
    );
  }}
/>;

Answer 2

您可以尝试

const Reloadable = (props) => {
    const { location } = props
    const [key, setKey] = useState(location.key)

    if (location.key !== key) {
        setTimeout(() => setKey(location.key), 0)
        return null
    }
    return <>{props.children}</>
}

<Route path="/" exact render={({ history, location }) => (
    <Reloadable location={location}>
        <SomeComponent />
    </Reloadable>)}
/>

Answer 3

请参阅此文档。 https://reacttraining.com/react-router/web/api/Route/exact-bool

确切的参数在以下情况下起作用   您有多个具有相似名称的路径：

例如，假设我们有一个“用户”组件，该组件显示了   用户。我们还有一个CreateUser组件，用于创建   用户。 CreateUsers的网址应嵌套在“用户”下。所以我们   安装程序可能看起来像这样：

现在，当我们转到   http://app.com/users路由器将通过我们定义的所有路径   路由并返回找到的FIRST匹配项。所以在这种情况下，   首先找到用户路线，然后返回。一切都很好。

但是，如果我们转到http://app.com/users/create，它将再次出现   通过所有定义的路线，并返回找到的第一个匹配项。   React Router执行部分匹配，因此/ users部分匹配   / users / create，因此它会错误地再次返回用户路由！

精确参数会禁用路由的部分匹配，并使   确保仅在路径与完全匹配时才返回路线   当前网址。

因此，在这种情况下，我们应该为用户路线添加精确值，以便它   仅在/ users上匹配：

url与相同路由匹配时，React路由器未重新加载页面

3 个答案: