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 (
  
      
        } >
        } >
        } >
        {/* 如果需要默认显示页面将不需要填写路径 ，子路由不需要写/斜杠跳转时会带有*/}
          } >
          } >
            } >
            } >
            } >
          
        
      
    
    );
}

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 (
        <>
	        
About
	        {/* 可通过编程式路由进行子页面的切换显示（切换子页面不需要加斜杠） */}
	        
{
                navigate('particulars', {
                    replace: true
                });
            }}>
	        
        
    )
}

在子页面内写入内容

import React, { useEffect, useState } from 'react';
import styles from './Latent.module.css';

export default function Latent() {
    return (
		<>
			

				Latent
			
		
	)
}