react嵌套页面
先从路由身上导出
import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
//引入页面;
import Home from './view/Home';
import About from './view/About';
import Integrated from './view/Integrated';
import Sidebar from './view/Sidebar';
import Latent from './view/Latent';
import Particulars from './view/Particulars';
import SecurityCheck from './view/SecurityCheck';
react 配置路由你可以在App.js中设置,也可以在index.js中配置,整体灵活度较高;
如果不上传服务器的话可以使用BrowserRouter包裹路由,地址栏就不会有井号出现;
function App() {
//将需要的嵌套页面写在route标签内
return (
<HashRouter>
<Routes>
<Route path='/' element={<Login />} ></Route>
<Route path='/home' element={<Home />} ></Route>
<Route path='/about' element={<About />} >
{/* 如果需要默认显示页面将不需要填写路径 ,子路由不需要写/斜杠跳转时会带有*/}
<Route path='' element={<Integrated />} ></Route>
<Route path='sidebar' element={<Sidebar />} >
<Route path='' element={<Latent />} ></Route>
<Route path='particulars' element={<Particulars />} ></Route>
<Route path='securityCheck' element={<SecurityCheck />} ></Route>
</Route>
</Route>
</Routes>
</HashRouter>
);
}
export default App;
在父页面内引入路由出口
import React, { useState, useEffect } from 'react';
import styles from './About.module.css'
import { Outlet, useNavigate } from 'react-router-dom';
export default function About() {
const navigate = useNavigate();
return (
<>
<div>About</div>
{/* 可通过编程式路由进行子页面的切换显示(切换子页面不需要加斜杠) */}
<div onClick={()=>{
navigate('particulars', {
replace: true
});
}}></div>
<Outlet />
</>
)
}
在子页面内写入内容
import React, { useEffect, useState } from 'react';
import styles from './Latent.module.css';
export default function Latent() {
return (
<>
<div>
Latent
</div>
</>
)
}