Is it common for parameters to be passed between routes in react.js?-CodePudding

We don't use state management in this project In the header, there are buttons, I want to listen to button clicks inside the body (route) As a result, I passed the parameters as follows:

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>
    );
}

And MainRoutes component :

`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>
    );
}`

It works fine for me, but I heard from my friend to work that it is not common / best practice to transfer parameters this way. Is that correct?

CodePudding user response：

Either use state management tool or context, a few months later the project will become unmanageable mess. https://beta.reactjs.org/learn/scaling-up-with-reducer-and-context