【react】react18的学习（十）–路由react-router-dom@6

最新推荐文章于 2025-09-19 20:36:42 发布

原创

最新推荐文章于 2025-09-19 20:36:42 发布 · 929 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #数学建模

本文介绍了ReactRouterv6相较于v5的变化，如路由配置集中于根组件，不再在子组件中单独配置，使用HashRouter、NavLink、Route和Routes等组件。路由传参仍支持query、params和state方式，但路由跳转不再使用history对象，而是依赖useNavigate钩子。同时展示了A、B、C组件的路由示例及其间的跳转和参数获取方法。

一、知识内容

与 v5 对比：

所有路由配置都在一个根组件内编写，子组件路由在路由标签插槽里写，不在去子组件内单独配置；

import React from 'react'
import {
   
    HashRouter, Navigate, NavLink, Route, Routes } from 'react-router-dom'
import A from './router-demo/A'
import B from './router-demo/B'
import C from './router-demo/C'
import D from './router-demo/D'
const App = () => {
   
   
  return (
    <HashRouter>
      <NavLink to="/a">a组件</NavLink>
      <NavLink to="/b">b组件</NavLink>
      <NavLink to="/c">c组件</NavLink>
      <Routes>
        <Route path="/" element=