获取URL ID参数的全局访问权

Question

如何获得当前URL ID参数的全局访问权限?我在React的子组件中访问当前URL ID时遇到了麻烦。在我的ChecklistTool组件中查询MongoDB数据库需要ID。

通常情况下，我会通过这种方式传递道具并访问params。但是，我使用的是Editor.js，它不允许我按要求传递道具。

这是我的Editor.js组件。它可以访问参数信息:

<EditorJs
instanceRef={(instance) => (instanceRef.current = instance)}
placeholder="Start typing what's in your head..."
tools={EDITOR_JS_TOOLS}
enableReInitialize={true}
data={data}
/>

这是我的自定义Checklist组件，它在Editor.js组件中呈现为一个块。我无法将URL参数传递给这个组件:

<ChecklistTool
onDataChange={onDataChange}
readOnly={this.readOnly}
data={this.data}
isAdmin={true}
/>

这是我使用React路由器的文件:

<Router>
<Switch>
<Route exact path="/document/:id" component={DocumentView}/>
</Switch>
</Router>

任何想法如何获得访问当前URL参数ID在所有需要的文件?谢谢!

Answer 1

如果你使用的是React>= 16.8版本，那么你可以使用hooks。React-Router没有使用props来传递值，而是提供了一个名为useParams的钩子，它可以让你从任何组件中访问URL参数(只要它被封装在路由器中)，这使得它本质上是全局的，可以被任何子组件访问，而不需要作为props传递。

用法如下:

首先导入useParams

import {useParams} from "react-router-dom";

然后调用钩子

const params = useParams(); //:id param will be in params.id and so on...

如果您尝试过这种方法，但没有为您工作，请让我知道更多关于您收到的错误类型，如果有的话，我会调查它们。

关于useParams钩子的更多信息。