React路由

简要介绍：

React 中的路由，通常是指在单页面应用中管理不同页面内容的方式。

React 路由可以帮助我们在不刷新整个页面的情况下实现页面之间的导航和状态管理。

React 路由的实现通常依赖于第三方库，最常用的库是 React Router。

一、路由基础 react-router-dom

1.安装路由 

 当前版本为6.x

npm i react-router-dom (其中  i  为  install 的缩写)

2.创建路由容器   

src文件夹下面的路径 /router/index.js

  01.导入路由组件：import {createHashRotuer，RouterProvider} from 'react-router-dom'

  02.配置路由

const routes= [

{ path:"/",element:</>},

{ path:"/about",element:</>}

]

  03.导出路由

export function RouterView(){

const router = createHashRouter(routes);

return <RouterProvider router={ router } />

}

  04.访问      前提：此项目在终端中正在运行， npm run dev 为开始运行的命令代码

在浏览器地址栏输入 :5273/#/  或  :5273/#/about   

注：地址全称为 http://localhost:5173/   括号内仅为了解内容（若是在一个设备上只运行了一次或第一次运行 冒号后面的为  5173  后面此终端没关闭  再打开运行新的项目则为 5174  依次加1，以此类推 ）

二、嵌套路由

配置路由如下 

文件路径       router/index.jsx

{path:"/",element:<Root/>,children:[{path:"",element:</>}]}

其中 root子组件容器路径为：src下面的  views/Root.jsx

切换路由 

NavLink 组件用于在应用中创建链接，使用户能够点击链接进行页面之间的导航。

 导入跳转路由     import {NavLink} from 'react-router-dom'  

  <NavLink to="/about">关于</NavLink>

三、路由传参

1.path传参

定义：{path:"/produce/:id"}
传递：<NavLink to="/produce/abc"
获取：const params = useParams(); params.id获取

2.search查询传参

传递 <NavLink to="/user?name=mcj&age=18"
获取 const location = useLocation(); location.search获取

3.state状态传参

传递  <NavLink state={{done:true,pass:80}}
获取  const location = useLocation(); location.state获取

常见的几种路由use

1.useLocation 获取地址信息

2.useParams 获取路径参数信息

3.useNavigate 获取导航

4.useSearchParams 获取查询信息

useNavigate 创建导航

const navigate = useNavigate();
// 返回前进  -1 代表后退1次 
navigate(-1)
// 跳转页面
navigate("/user",{replace:true,state:{}})

结语

暂时总结这么多，希望各位都能够 财源滚滚 且 天天开心 ！