react嵌套路由

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></>)
}