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>

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