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

news2025/1/18 22:15:15

在这里插入图片描述

文章目录

- - React-router的三个版本
  - react-router使用
  - - 嵌套路由
    - 动态路由
  - 获取路由参数
  - - Params参数
    - Query参数
    - Location信息
  - 控制跳转地址
  - 异步路由
  - 根据配置文件生成路由

React-router的三个版本

React-router 服务端渲染使用
React-router-dom 浏览器端渲染使用
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>