升级到 react-route v6 后路由不工作答案

【问题标题】：Route is not working after upgrading to react-route v6升级到 react-route v6 后路由不工作
【发布时间】：2022-01-13 08:31:05
【问题描述】：

我有这个MainRouting.js 组件：

import routes from '../Routes.js';
import { Routes, Route } from "react-router-dom";
import NotFound from '../Panel/NotFound';

const MainRouting = () => {
    return (
        <Routes>
            {
                routes.map(route =>
                    <Route
                        key={route.path}
                        path={route.path}
                        exact
                        element={route.component} />)
            }
            <Route path='*' element={<NotFound />} />
        </Routes>
    );
}

export default MainRouting;

它工作得很好。但是现在我升级到 react-router v6 后它不再工作了。

我看到了这个错误：

index.js:1 警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。在路线
在 MainRouting
在 div
在 div
在 div
在面板
在 LocalizationProvider
在路由器
在浏览器路由器

我该如何解决这个问题？

注意：我已经更新了 NotFound 以匹配新语法。

【问题讨论】：

你应该告诉我们route.component是什么。可能你需要调用函数route.component()。然后 rr6 引入了一些变化。在这里查看stackoverflow.com/questions/69866581/…
@AntonioPantano，做到了。 route.component()。很奇怪。

标签： javascript reactjs react-router

【解决方案1】：

对我来说，我必须这样做：

        <Routes>
            {
                routes.map(route => {
                    const Component = route.component;
                    return <Route
                        key={route.path}
                        path={route.path}
                        element={<Component />}
                    />
                })
            }
            <Route
                path='*'
                element={<NotFound />}
            />
        </Routes>

关键是以下几行：

const Component = route.component;

和

element={<Component />}

【讨论】：