我如何在父节点中捕获React Router动态参数?

Question

我希望能够在父组件中存储子组件的id。然而，我不知道如何做到这一点。我知道我可以在子进程中调用useParams()，然后将id传递回父进程，但这似乎是一种迂回的方式来完成这一任务。

<Route path="/project/:id" element={<Child />}>
</Route>
const childId = ???

Answer 1

你可以在父组件中创建一个状态，然后将setState发送给子组件，并在接收到id后使用useParams();

父母

const [id, setId] = useState('');
<Route path="/project/:id" element={<Child setId={setId} />}>
</Route>

孩子

const {id} = useParams();
props.setId(id); // Or however you access props in your component