在react.js中，在路由之间传递参数是常见的吗?

Question

在这个项目中我们没有使用状态管理在header中，有一些按钮，我想要收听主体内的按钮点击(路由)因此，我以如下方式传递参数:

export default function Body({ version }) {
const [selectedHeaderButton, setSelectedHeaderButton] = useState({
index: undefined,
label: "Select Vehicle Plan",
});
return (
<div>
<HeaderBar open={open} drawerWidth={drawerWidth} handleDrawerOpen={handleDrawerOpen}>
<Header
selectedHeaderButton={selectedHeaderButton}
setSelectedHeaderButton={setSelectedHeaderButton}
version={version}
/>
</HeaderBar>
<MainRoutes
selectedHeaderButton={selectedHeaderButton}
setSelectedHeaderButton={setSelectedHeaderButton}
/>
</div>
);
}

和MainRoutes组件:

export default function MainRoutes({ selectedHeaderButton, setSelectedHeaderButton }) {
return (
<main>
<div>
<Routes>
<Route
exact
element={
<Rpo
selectedHeaderButton={selectedHeaderButton}
setSelectedHeaderButton={setSelectedHeaderButton}
></Rpo>
}
path="/"
/>

{/* <Route component={Page404} /> */}
</Routes>
</div>
</main>
);
}

这对我来说很好，但我从我的朋友那里听说，以这种方式传递参数是不常见的/最佳实践。

正确吗?

Answer 1

要么使用状态管理工具，要么使用上下文，几个月后项目将变得难以管理的混乱。https://beta.reactjs.org/learn/scaling-up-with-reducer-and-context