文章阅读

沉浸阅读完整内容

写文章

React配置二级路由

正在统计阅读人数 正在统计字数
登录收藏0
字号 100%

在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;

推荐阅读

4 篇精选
文章 / 32判断本月休息天数 文章 / 31Js给空数组生成1-n的值 文章 / 33定义一个数组,包含9个任意的整数,求该数组中奇数的个数 文章 / 30求数组中最大值

发表评论

评论 0

还没有评论,欢迎留下第一条讨论。

分享精彩,传递价值

生成专属海报,分享你的文章,让更多人发现好内容

浏览器不支持 Canvas,无法生成海报。

每日签到

每天来这里,记录一点持续积累。

当前积分--积分
本月签到--
本月获得--积分
正在读取