javascript - 为什么 react-router-dom 在第一次加载时不提供 location.key？

Question

我有一个使用 react-router 的组件屏幕，我使用了很多参数 location.key 来标识我的路径和其他东西(location.pathname 没有没有解决我的问题)。

但我意识到:当我第一次加载我的应用程序时，react-router 没有 location.key，这是为什么？是否有一些配置允许我更改此行为？

我正在使用 "react-router-dom": "^5.0.0"并添加:

import { withRouter } from 'react-router-dom';

...

  // to access
  this.props.location
...

export default withRouter(MyComponent);

Answer 1

我遇到了类似的问题。这是因为 react router 背后的 history 包。它不会在第一次加载时触发以推送或替换历史记录。

第一次加载组件可能如下所示:

function firstLoadComponent({ history })
{
  history.replace(history.location, {/* state object */});

...
}

上述组件必须至少触发一次。我还假设路由器组件的组件包装器可以获取 Prop 。这将手动创建 React Router 历史记录数组的第一个历史条目。

您可以使用 React Router 的 Web History API 创建自己的逻辑:https://reactrouter.com/web/api/history