React动态路由结合array.map()失效，访问/admin/dashboard无匹配路由

问题现象 #

访问/admin/dashboard时，页面提示No routes matched location "/admin/dashboard"，相关代码及目录结构如下：

routes.js #

import UpdatePassword from "../../components/Admin/UpdatePassword";
import UpdateDetails from "../../components/Admin/UpdateDetails";
import Dashboard from "../../components/Admin/Dashboard";

const routes = [
    {path: '/admin', exact:true, name:'Admin' },
    {path: '/admin/dashboard', exact: true, name:'Dashboard', element:Dashboard},
    {path: '/admin/update-password', exact: true, name:'UpdatePassword', element: UpdatePassword},
    {path: '/admin/update-details', exact: true, name: 'UpdateDetails', element: UpdateDetails},
];

export default routes;

MasterLayout.js #

import Navbar from "./Navbar";
import Sidebar from "./Sidebar";
import Footer from "./Footer";
import routes from "../../components/routes/routes";
import {Routes, Route} from "react-router-dom";
import {Navigate} from 'react-router-dom';


const MasterLayout = () => (

    <div className="container-scroller">
        <Navbar/>

        <div className="container-fluid page-body-wrapper">
            <Sidebar/>

        <div className="main-panel">

            <div className="content-wrapper">
                    <Routes>
                    {
                        routes.map((route,idx)=> {

                            return(
                                route.element && (
                                         <Route
                                            key= {idx}
                                            name= {route.name}
                                            path = {route.path}
                                            exact = {route.exact}
                                            render={(props) => ( <route.element{...props} />
                                        )}/>
                            )
                        )})
                    }
                    <Navigate to="/admin/dashboard"/>
                    </Routes>
            </div>
            <Footer/>
            </div>
        </div>
</div>
);

export default MasterLayout;

App.js #

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Routes, Route } from 'react-router';
import {BrowserRouter as Router} from "react-router-dom";
import MasterLayout from "./layouts/Admin/MasterLayout";


const App = () => (
    <div>
        <Router>
            <Routes>
                {/*We get only single file that contains everything*/}
                <Route path="/admin/" name="Admin" render={(props) => <MasterLayout {...props}/> } ></Route>
            </Routes>
        </Router>
    </div>
);

export default App;

目录结构 #

错误原因 #

代码混用了React Router v5和v6的API：

1. v6移除了render属性，路由组件需通过element传递
2. v6中Route默认精确匹配，不再需要exact属性
3. App.js中/admin/路径无法匹配/admin/dashboard，需改为/admin/*捕获所有子路由
4. MasterLayout中动态渲染组件时，未遵循JSX组件名首字母大写规则，导致渲染失败

解决方案 #

1. 修改App.js #

将render改为element，并把路径改为/admin/*以匹配所有子路由：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Routes, Route } from 'react-router-dom';
import {BrowserRouter as Router} from "react-router-dom";
import MasterLayout from "./layouts/Admin/MasterLayout";


const App = () => (
    <div>
        <Router>
            <Routes>
                <Route path="/admin/*" element={<MasterLayout />} />
            </Routes>
        </Router>
    </div>
);

export default App;

2. 修改routes.js #

去掉路径中的/admin前缀，改用相对路径：

import UpdatePassword from "../../components/Admin/UpdatePassword";
import UpdateDetails from "../../components/Admin/UpdateDetails";
import Dashboard from "../../components/Admin/Dashboard";

const routes = [
    {path: '', name:'Admin' },
    {path: 'dashboard', name:'Dashboard', element: Dashboard},
    {path: 'update-password', name:'UpdatePassword', element: UpdatePassword},
    {path: 'update-details', name: 'UpdateDetails', element: UpdateDetails},
];

export default routes;

3. 修改MasterLayout.js #

移除exact和render属性，修复组件渲染的首字母大写问题，添加index路由实现根路径重定向：

import Navbar from "./Navbar";
import Sidebar from "./Sidebar";
import Footer from "./Footer";
import routes from "../../components/routes/routes";
import {Routes, Route, Navigate} from "react-router-dom";


const MasterLayout = () => (
    <div className="container-scroller">
        <Navbar/>
        <div className="container-fluid page-body-wrapper">
            <Sidebar/>
            <div className="main-panel">
                <div className="content-wrapper">
                    <Routes>
                        {routes.map((route, idx) => {
                            const Element = route.element;
                            return route.element ? (
                                <Route
                                    key={idx}
                                    name={route.name}
                                    path={route.path}
                                    element={<Element />}
                                />
                            ) : null;
                        })}
                        {/* 访问/admin时自动跳转到dashboard */}
                        <Route index element={<Navigate to="dashboard" />} />
                    </Routes>
                </div>
                <Footer/>
            </div>
        </div>
    </div>
);

export default MasterLayout;

验证 #

修改完成后，访问/admin/dashboard、/admin/update-password等路径可正常渲染对应组件，访问/admin会自动重定向到/admin/dashboard。

内容的提问来源于stack exchange，提问作者Ali Mammadov