React配置二级路由

在layout中配置二级路由只需要在Route下面嵌套Route即可，在需要显示的地方写 例如：

配置二级App.js

        <Route path='/Layout' element={<Layout />}>
          {/* 热映 */}
          <Route path='/Layout/Popular' element={<Popular />}></Route>
          <Route path='/Layout/Cinema' element={<Cinema />}></Route>
          <Route path='/Layout/My' element={<My />}></Route>
        </Route>

layout页面

引入Outlet：

import { Outlet } from 'react-router-dom';

放置出口：

<div className='page'>
    <Outlet />
</div>

完整代码

import React from 'react'
import './App.scss'
import Login from './views/login/Login.jsx'
import Register from './views/register/Register.jsx'
import Layout from './views/layout/Layout'
import Popular from './views/Popular/Popular'
import Cinema from './views/cinema/cinema'
import My from './views/my/My'
import { HashRouter, Route, Routes } from 'react-router-dom';
function App() {
  return (
    <HashRouter>
      {/* routes线路匹配容器，所有组件都要放置才这里 */}
      <Routes>
        <Route path='/' exact element={<Login />}></Route>
        {/* 登录 */}
        <Route path='/Login' element={<Login />}></Route>
        {/* 注册 */}
        <Route path='/Register' element={<Register />}></Route>

        <Route path='/Layout' element={<Layout />}>
          {/* 热映 */}
          <Route path='/Layout/Popular' element={<Popular />}></Route>
          <Route path='/Layout/Cinema' element={<Cinema />}></Route>
          <Route path='/Layout/My' element={<My />}></Route>
        </Route>
      </Routes>
    </HashRouter>
  );
}

export default App;