useParams 可以在 App.js 中使用吗？

Question

美好的一天，希望我没有打扰你们。

---

详情

我有这样的路径

localhost:3000/Project-1/todo-1

和这样的路由切换

<Route path='/:project/:todo' component={Todo} />

---

预期输出

当浏览器在示例路径中时，我期望 App.js 也可以使用 useParams 获取参数对象，但显示为空。我误用了钩子吗？谢谢你的回答。

---

其他细节

我确实使用了 useLocation 来返回类似路径的东西，但这不是我的目标，它应该是类似

params: { 
  project: 'Project-1', 
  todo: 'todo-1 '
}

使用 useParams 返回，以便于提取项目和待办事项值

Answer 1

我相信Route 会向它渲染的组件注入道具，因此您应该能够直接从Todo 内的match 道具中提取它：this.props.match.params。

您将可以访问不同位置的匹配对象：

• 将组件路由为 this.props.match
• 路由渲染为 ({ match }) => ()
• 将子节点路由为 ({ match }) => ()
• withRouter as this.props.match
• matchPath 作为返回值

https://reacttraining.com/react-router/web/api/match

这仅适用于在路由上的路由器内渲染的组件，即Route 正在渲染的组件或子组件组件位于 DOM 树的下方。如果App.js 正在渲染路由器，它将没有它。

如果您需要对根 App.js 中的路由参数做一些事情，您可以使用未指定的路径将其包装在一个路由中，以便它匹配所有路由，在您的路由器中使用 render 属性。只需确保它在任何 Switch 组件之外呈现，尽管开关 only 返回第一个匹配项，而不是所有匹配项。

<Route
  render={({ match }) => {
    console.log('match', match);
    // do what you need with the `match` prop, i.e. `match.params`
    return null; // return null to indicate nothing should actually be rendered
  }}
/>