Question

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

详细信息

我有一条这样的路

本地主机：3000 / Project-1 / todo-1

和这样的路线切换

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

预期产量

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

其他详细信息

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

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

使用 useParams 返回的

，以便于提取项目和待办事项的值

Answer 1

我相信Route会将道具注入到其渲染的组件中，因此您应该能够将其直接从match：Todo中的this.props.match.params道具中拉出。

您将可以在各个地方匹配对象：

将组件作为this.props.match
将渲染路径设置为（{match}）=>（）
将孩子作为（{match}）=>（）
将路由器作为this.props.match
matchPath作为返回值

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

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

如果您需要对根App.js中的路由参数进行某些操作，则可以使用渲染道具将其包装在具有未指定路径的路由中，以使其与所有路由匹配。只需确保将其呈现在任何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
  }}
/>

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

详细信息

预期产量

其他详细信息

1 个答案: