如何捕获父捕获React Rouyter动态参数？

Question

我希望能够将孩子的id存储在父组件中。但是，我不确定该怎么做。我知道我可以在孩子中调用useParams（），然后将id传递给父母，但这似乎是一种完成此操作的回旋方式。

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

const childId = ???

Answer 1

您可以在父组件中创建一个状态，然后在接收ID之后，使用USEPARAMS（）将SetState发送到子女组件中，并在子组件中调用SetState;

父母的

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