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