23.1 父组件引入 useNavigate

import {NavLink, Outlet, useNavigate} from "react-router-dom";
......
// 编程式路由导航const navigate = useNavigate();const toClassify = () => {navigate('classify', {state: {param_C: 'elendalee', param_D: 20}})};
......
<button onClick={toClassify}>classify</button>

父组件 Home/ndex.jsx

import React from "react";
import {NavLink, Outlet, useNavigate} from "react-router-dom";const Home = () => {// 类组件中不能用const定义变量// 选中高亮const activeStyle = ({isActive}) => {return isActive ? 'background' : "";};// 编程式路由导航const navigate = useNavigate();const toClassify = () => {navigate('classify', {state: {param_C: 'elendalee', param_D: 20}})};return (<div>首页的页面<div style={{display: "flex", justifyContent: 'center', marginTop: '20px'}}>i<NavLink to='navigation' className={activeStyle}>navigation</NavLink></div><div style={{background: 'red'}}>{/*<!-- Renders the child route's element, if there is one. -->*/}<Outlet/></div></div>);}export default Home;

子组件 classify.jsx

import React from 'react';
import {useLocation} from "react-router-dom";const Classify = () => {// 两次结构赋值const {state: {param_C, param_D},} = useLocation();return (<div>分类的页面<div>父组件home传递的参数1：{param_C}父组件home传递的参数2：{param_D}</div></div>);
}export default Classify;

路由表

import {Navigate} from "react-router-dom";
import Home from "../components/Home";
import About from "../components/About";
import Classify from "../components/Home/components/Classify.jsx";
import Navigation from "../components/Home/components/Navigation.jsx";export default [{path: '/home',element: <Home/>,children: [{path: 'classify',element: <Classify/>},{path: 'navigation',element: <Navigation/>},]},{path: '/about',element: <About/>,},{path: '/',element: <Navigate to='about'/>,}
]

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { HashRouter } from "react-router-dom";// 日常开发推荐 哈希路由 HashRouter 防止出现404报错
ReactDOM.createRoot(document.getElementById("root")).render(<React.StrictMode><HashRouter><App text={"react"} /></HashRouter></React.StrictMode>
);

app.jsx

import React from "react";
import {NavLink, useRoutes} from "react-router-dom";
import routes from "./routes/index.jsx";
import "./app.css"const App = () => {const element = useRoutes(routes);// 选中高亮const activeStyle = ({isActive}) => {return isActive ? 'background' : "";};return (<div className="all"><div><div className="link"><NavLink to="/home" className={activeStyle}>打开首页的页面</NavLink></div><div className="link"><NavLink to="/about" className={activeStyle}>打开关于的页面</NavLink></div></div><div className="view">{element}</div></div>);
}export default App;