React路由 基本使用 嵌套路由 动态路由 获取路由参数 异步路由 根据配置文件来生成路由

React-router的三个版本

1. React-router 服务端渲染使用
2. React-router-dom 浏览器端渲染使用
3. React-router-native React-native混合开发使用
   其中React-router-dom用的最多

react-router使用

安装pnpm i react-router-dom

react全局插件的使用方式
React中没有vue那样的vue.use react中使用一个插件，库，都是引入一个组件，然后把要用该插件的部分包起来

通过BroserRouter或者HashRouter包裹要使用路由的根组件
在你想使用的组件上,这里不止根组件，任何组件包裹都可使用路由 非常方便

import { createRoot } from 'react-dom/client'import App from './App.tsx'import {BrowserRouter,HashRouter}from 'react-router-dom';createRoot(document.getElementById('root')!).render(<BrowserRouter><App /></BrowserRouter>)

使用Routes组件，定义路由显示区域
使用Route组件，定义具体路由规则
使用NavLink或者Link组件，定义跳转链接
NavLink会在当前组件加个active类名这也是他与Link组件的区别

import {Routes,Route,NavLink}from 'react-router-dom';import Page1 from './page1'import Page2 from './page2'import Page3 from './page3'import Page4 from './page4'function App() {return (<><h1>菜单</h1><div><NavLink to="/page1">page1</NavLink><NavLink to="/page2">page2</NavLink><NavLink to="/page3">page3</NavLink><NavLink to="/page4">page4</NavLink></div><Routes><Route path="/page1" element={<Page1></Page1>}></Route><Route path="/page2" element={<Page2></Page2>}></Route><Route path="/page3" element={<Page3></Page3>}></Route><Route path="/page4" Component={Page4}></Route></Routes></>)}

嵌套路由

Navigate-路由重定向
Outlet，嵌套路由的子路由显示处

//page1.tsx
import {Outlet} from 'react-router-dom'export default function page1 (){return (<><h1>page1</h1><Outlet></Outlet></>)}
//app.tsx
<Route path="/page1" element={<Page1></Page1>}><Route path="son" element={<Page1Son></Page1Son>}></Route></Route>

动态路由

<Route path="/page3/:id" element={<Page3></Page3>}></Route>

获取路由参数

Params参数

import {useParams} from 'react-router-dom'export default function page3 (){let params = useParams()console.log(params);return <h1>page3</h1>}

Query参数

//地址栏信息http://localhost:5173/page4?a=123&b=456
import {useSearchParams} from "react-router-dom"export default function page4 (){let [searchparams,setSearchParams] = useSearchParams();console.log(searchparams.get('a'))return (<><h1>page4</h1><button onClick={() => {setSearchParams({a:"666",b:"777"})}}>改变</button></>)}

Location信息

import {useLocation}from 'react-router-dom'export default function page2 (){let location = useLocation();console.log(location);return <h1>page2</h1>}

控制跳转地址

useNavigate创建跳转方法 然后跳转

import {Outlet,useNavigate} from 'react-router-dom'export default function page1 (){let nav = useNavigate()return (<><h1>page1</h1><Outlet></Outlet><button onClick={() => {nav("/page2",{state:{token:"hello"}})}}></button></>)}

异步路由

React做异步路由，要配合导react本身的一个方法-lazy和一个组件suspense

<Route path="/page4" element={<Suspense fallback={<h2>加载中...</h2>}><LazyPage4 /></Suspense>}></Route>

根据配置文件生成路由

//routerArr.tsx
import Page1 from '../page1'import Page2 from '../page2'import Page3 from '../page3'import Page4 from '../page4'
export default [{path:'/page1',component:Page1},{path:'/page2',component:Page2},{path:'/page3',component:Page3},{path:'/page4',component:Page4},]
//router.tsx
import {Route} from 'react-router-dom'const RouterMap = (routerArr:any) => {return routerArr.map((item:any) => {return <Route path={item.path} Component={item.component} ></Route>})}export default RouterMap
//app.tsx
<Routes>{ RouterMap(routerArr)}</Routes>

本篇文章到这里就结束了，如果对你有用的话就点个关注吧 会持续更新技术文章