React18学习笔记(三) ReactRouter----React中的路由

0.准备

前端路由回顾:
一个路径path对应一个组件component,当访问一个路径时对应的组件会在页面进行渲染
环境搭建:

创建项目:npx create-react-app my-react-router
进入项目目录:cd my-react-router
安装所有依赖:npm i
安装ReactRouter包:npm i react-router-dom
启动项目:npm run start

1.示例:快速创建一个切换登录页和文章页的路由系统

//index.js
//引入
import {createBrowserRouter,RouterProvider} from 'react-router'
//创建路由实例对象
const router=createBrowserRouter({{path:'/login',element:<div>我是登录页</div>//此处跟vue不同,不是component},{path:'/article',element:<div>我是文章页</div>}
})
....
<RouterProvider router={router}></RouterProvider>

成功标志:地址栏localhost:3000/login有显示

2.实际开发中的路由配置

step1:在配置模块新增两个组件

┌─src
├─pages                 业务页面文件存放的目录
│  ├─article
│  │  └─index.js       文章页
│  └─login
│     └─index.js       登录页 ****代码****
//article/index.js
const Article=(=>{return <div>我是文章页</div>
})
export default Article//login/index.js
const Login=(=>{return <div>我是d登录页</div>
})
export default Login

step2:新增router模块,引入组件,配置对应关系

新增模块src/router/index.js

//导入
import login from "../page/login"
import article from "../page/article"
import {createBrowserRouter,RouterProvider} from 'react-router'
//创建路由实例对象
const router=createBrowserRouter({{path:'/login',element:<Login />},{path:'/article',element:<Article />}
})
export default router

step3:在应用入口文件src/index.js注入router实例

//index.js
//引入
import {createBrowserRouter,RouterProvider} from 'react-router'//引入路由实例对象
import router from './router'
....
<RouterProvider router={router}></RouterProvider>

3.路由导航以及传参

路由系统中的多个路由之间进行的路由跳转(并传参)
回顾:声明式导航VS编程式导航,查询参数传参VS动态参数传参

3.1.React中的声明式导航

通过<Link to='/article?id=1001&name=zs'>跳转文章页</Link>标签,描述要跳转去哪个路由
使用场景:左侧菜单栏跳转
传参:查询参数传参和动态参数传参

3.2.React中的编程式导航

通过调用useNavigate钩子函数以命令的形式进行跳转
使用场景:登录后跳转

4.嵌套路由

一级路由中嵌套二级路由
children属性:在一级路由的路由配置中写二级路由

const router=createBrowserRouter({{path:'/login/:id',element:<Login />,children:[{path:'/login111/:id',element:<Login111 />,},{path:'/login222/:id',element:<Login222 />,},]},
}//并在一级路由的页面中写二级路由出口
//Login.js
<Login111 />

5.默认二级路由

访问一级路由时,默认二级路由也能得到渲染
做法:在二级路由的位置去掉path,设置index属性为true

const router=createBrowserRouter({{path:'/login/:id',element:<Login />,children:[{//path:'/login111/:id',index:true,element:<Login111 />,},{path:'/login222/:id',element:<Login222 />,},]},
}

6.404路由

当浏览器都找不到对应path,跳转到404页面

//NotFound.js
const NotFound=()=>{return <h1>404 not found!!!</h1>
})
export default NotFoundconst router=createBrowserRouter({{path:'*',element:<NotFound />}
})

7.两种路由模式:hash模式和history模式

7.1.hash模式

有#号,如:url/#/login,监听hashChange事件,不需要后端文件

7.2.history模式

监听history对象和pushState事件