使用 React Router v6 不通过 Route 元素传递道具

Question

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


    )

}

来自仪表板组件的控制台日志记录 props.role 未定义。我已经查看了 20 个线程，但无法弄清楚我在这里做错了什么。

jsfiddle 中的仪表板组件导致 Whosebug 不允许我在此处编辑 post。这是来自 Material UI

的模板

https://jsfiddle.net/j4xo0yuv/

Answer 1

通过查看你的代码，问题是你有这个：

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

如果您看一下设置为 Route 元素的组件是 Dashboard，但实际上您打印 props.role 的组件是 DashboardContent，因此您需要执行此操作并传递DashboardContent 的角色：

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

使用 React Router v6 不通过 Route 元素传递道具

Props not being passed through Route element with React Router v6

reactjs

react-router-dom