React - router(v6)，二级路由，占位

1. 创建路由，导出，假设一级路由默认展示为<Home />，二级路由默认展示为<EnergySaving />

import React from "react";
import { Route, Routes } from "react-router";
import RouterAuth from "../auth/RouterAuth/RouterAuth.jsx";

const Login = React.lazy(() => import('../components/Login/Login.jsx'));
const Home = React.lazy(() => import('../components/Content/Content.jsx'));
const DataScreen = React.lazy(() => import('../components/Content/HomePage/DataScreen/DataScreen.jsx'));
const EnergySaving = React.lazy(() => import('../components/Content/HomePage/EnergySaving/EnergySaving.jsx'));


const routerAr = [
    {
        path: '/login',
        element: <Login />
    }, {
        path: "/",
        element: <Home />,
        isLogin: true,
        children: [
            {
                path: 'dataScreen',
                element: <DataScreen />
            }, {
                path: '',
                element: <EnergySaving />
            }, {
                path: 'energySaving',
                element: <EnergySaving />
            }
        ]
    }
]

const routerMp = () => {
    return (
        <Routes>
            {routerAr.map(item => (
                <Route
                    path={item.path}
                    element={item.isLogin ? <RouterAuth {...item} /> : item.element}
                    key={item.path}
                >
                    {item.children && item.children.map(child => (
                        <Route
                            path={child.path}
                            element={child.element}
                            key={child.path}
                        />
                    ))}
                </Route>
            ))}
        </Routes>)
}

const routerElement = routerMp();

export default routerElement;

2. 顶层组件注册路由

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux'
import store from './store/store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>
);

3. 将路由导入，放进组件

import React, { Suspense } from 'react'
import routerElement from './router/router'

export default function App() {

  return (
    <div>
      <Suspense fallback={'加载中...'}>
        {routerElement}
      </Suspense>
    </div>
  )
}

4. 使用占位将路由放在理想位置，例（aaaa和bbbb中间，默认显示为<EnergySaving />组件）

import React from 'react'
import { Outlet } from 'react-router'

export default function NavMenu() {
  return (
    <div>
        <p>aaaa</p>
        {<Outlet />}
        <p>bbbb</p>
    </div>
  )
}

5. 最终效果如图