使用参数可以在应用程序.js中使用吗?

Question

美好的一天，希望我不会打扰你们。

---

详

我有这样的路

本地主机：3000/项目-1/待办事项-1

和像这样的路线切换

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

---

预期输出

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

---

其他详细信息

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

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

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

Answer 1

我相信Route

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

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

• 路由组件作为 this.props.match
• 路由渲染为 ({ 匹配 }) => ()
• 将子项路由为 ({ 匹配 }) => ()
• 与路由器作为这个.props.match
• 匹配路径作为返回值

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

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

如果您需要对根App.js中的路由参数执行某些操作，则可以使用 render prop 将其包装在路由中，具有未指定的路径，以便它匹配所有路由。只需确保在任何Switch组件之外呈现它，因为开关只返回第一个匹配项，而不是所有匹配项。

<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
}}
/>