Props not being passed through Route element with React Router v6-CodePudding

export default function App() {
    return (
        <Router>
            <Routes>
                    <Route path="/" element={<App />} />
                    <Route path="roles" element={<Dashboard role={true}  />} />
            </Routes>
        </Router>


    )

}

Console logging props.role from the Dashboard component gives me undefined. I've looked at 20 threads on this and can't figure out what I'm doing wrong here.

Dashboard component in jsfiddle cause Stackoverflow won't let me edit the post with all of it in here. It's a template from Material UI

https://jsfiddle.net/j4xo0yuv/

CodePudding user response：

By looking through your code the issue is that you have this:

export default function Dashboard() {
    return <DashboardContent />;
}

If you take a look the component that you're setting as the Route element is Dashboard but actually the one where you're printing the props.role is the DashboardContent so you need to do this and pass the role to the DashboardContent:

export default function Dashboard(props) {
    return <DashboardContent role={props.role} />;
}