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

Posted 2023-02-21

【中文标题】当 url 匹配相同的路由时，React 路由器不会重新加载页面

【英文标题】：React router is not reloading page when url matches the same route

【发布时间】：2019-01-16 02:33:49

【问题描述】：

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

（反应 16，路由器 v4）

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

【问题讨论】：

this answer 回答你的问题了吗？

所以读取匹配参数并手动重新加载是我知道的解决方案，正如我在问题中提到的那样。寻找智能解决方案。

你需要使用exact 道具。参考这个链接***.com/questions/49162311/…

【参考方案1】：

我认为这样的事情可能有助于解决您的问题

<Route key='notReloadableRoute' ... /> 

（静态键，像普通字符串）

【参考方案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>)
/>

【参考方案3】：

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

【讨论】：

这是一个非常非常聪明的解决方案。一旦我实施它并且我看到它有效，我会接受它（因为 react 16 可能不会基于 key 刷新）。不过很聪明

绝对的天才。如此简单，却又如此优雅。它奏效了

有人能解释一下这里的语法吗？它是一个匿名函数，提供给路由的 render 属性，返回 jsx，我们以某种方式只获取所需的 url 参数并为组件创建一个 key prop，对吗？但是 const = props 是如何工作的呢？

@rayaqin 它叫object destructuring。对于const testid = props.match.params.testid, type = props.match.params.type, ...，它本质上只是糖

【参考方案4】：

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

确切的参数在什么时候起作用 您有多个名称相似的路径：

例如，假设我们有一个用户组件，它显示一个列表 用户。我们还有一个 CreateUser 组件，用于创建 用户。 CreateUsers 的 url 应该嵌套在 Users 下。所以我们的 设置可能如下所示：

现在问题在这里，当我们去 http://app.com/users 路由器将通过我们定义的所有 路由并返回它找到的第一个匹配项。所以在这种情况下，它会 先找到用户路由，然后返回。都很好。

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

exact 参数禁用路由的部分匹配，并使 确保仅在路径与 当前网址。

所以在这种情况下，我们应该在用户路由中添加确切的内容，以便它 只会匹配 /users:

【讨论】：

不起作用。可能是我没有解释问题，但这并不能解决问题。