React（七）

一、React-Router的基本使用1.安装和介绍2.路由的配置和跳转3.Navigate的使用4.如果找不到对应的路由路径？

二、嵌套路由的用法三、编程式路由导航1.类组件中使用useNavigate2.函数式组件中使用useNavigate

四、路由跳转传参1.设置好路径的占位符（params）2.参数直接拼接到url中（query）

五、路由的配置文件六、路由的懒加载

一、React-Router的基本使用

1.安装和介绍

安装：

npm install react-router-dom

react-router最主要的API是给我们提供的一些组件:BrowserRouter或HashRouter

其中BrowserRouter使用history模式;

import React from "react"

import ReactDOM from "react-dom/client"

import { BrowserRouter } from "react-router-dom"

import App from "./App"

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(

)

HashRouter使用hash模式：

import React from "react"

import ReactDOM from "react-dom/client"

import { HashRouter } from "react-router-dom"

import App from "./App"

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(

)

2.路由的配置和跳转

在App中通过使用Routes和Route组件指定路由的出口，path属性指定对应路径，element属性指定要切换的组件实例。

通过Link组件实现路由的跳转，to属性指定切换的路径

import React, { PureComponent } from 'react';

import Home from './pages/Home';

import Search from './pages/Search';

import Detail from './pages/Detail';

import {Routes, Route, Link} from 'react-router-dom';

export class App extends PureComponent {

render() {

return (

)

}

}

export default App

3.Navigate的使用

Navigate用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中

比如我们举个例子，用户来到登录页： 如果没登陆就显示登录按钮； 如果点击登录按钮，就把状态设置为登录，然后就自动跳转到home页。

import React, { PureComponent } from 'react'

import { Navigate } from 'react-router-dom';

export class Login extends PureComponent {

constructor(props) {

super(props);

this.state = {

isLogin: false

}

}

login() {

this.setState({

isLogin: true

})

}

render() {

let { isLogin } = this.state;

return (

)

}

}

export default Login

还有就是路由的重定向问题，如果遇到地址只有一个/，那么就导航至home页（或者其实直接写Home组件 } />也可以的）

} />

} />

} />

} />

4.如果找不到对应的路由路径？

此时我们可以设置path='*'时（找不到路径时），自动路由跳转到某个组件，给用户提示

} />

} />

} />

} />

} />

二、嵌套路由的用法

在vue中我们需要去配置children这个配置项，但是在react中，不需要噢。

比如我要在Home里面搞个导航栏切换对应的内容：

那么首先先建三个组件：

然后来到App，在Home页的这个Route标签中间写嵌套的路由，这里的第一行是一个重定向，如果进入Home页，默认导航至第一个组件Column1：

然后回到Home页，设置跳转的标签和子路由的出口：

当然啊Outlet啊，Route啊，Link啊这些组件别忘了引入。

三、编程式路由导航

React-router给我们提供了一个hook，名字叫useNavigate，调用它可以返回一个函数，我们调用这个函数并把path传给它就可以实现随时通过点击事件进行路由的跳转。

但是既然是hook，那么就只能在函数式组件中使用，如果要在类组件中使用呢？

1.类组件中使用useNavigate

在类组件中想要使用hook并不是不可以，我们可以通过一个高阶组件，给类组件注入这个hook，然后通过props就能调用并传参。

在做高阶组件时，返回的应该是一个函数式组件（如果是类组件不还是用不了吗），然后把useNavigate的返回值（一个函数）注入进去

import { useNavigate } from "react-router-dom";

export default function enhanceUseNavigate(Component) {

//这里要通过函数式组件注入，因为类组件里不能用噢

return function(props) {

let navigate = useNavigate();

return

}

}

然后另一边使用高阶组件，并且点击按钮时调用传path就行了，这样就可以实现跳转。

export class App extends PureComponent {

navigateTo(path) {

//在这里就可以调用注入的跳转函数，传入path进行路由跳转

this.props.navigate(path);

}

render() {

return (

)

}

}

export default enhanceUseNavigate(App);

2.函数式组件中使用useNavigate

这东西本来就是为函数式组件而生的，所以在这里使用简直是妙蛙种子到了米奇妙妙屋，妙到家了。

function App() {

let navigate = useNavigate();

function navigateTo(path) {

navigate(path);

}

return (

)

}

export default App;

四、路由跳转传参

1.设置好路径的占位符（params）

类似于vue中的params参数 注意，写了占位，如果不传，那么路径就会置空

通过拼接:参数名可以设置参数的key，这样的话就可以把参数的value通过Link或编程式导航传给Detail组件。

那么参数怎么接呢？

这里要提到另一个hook用来接收参数，useParams，但是呢如果Detail组件是一个类组件，那么我们就要用高阶组件给它注入这个东西：

拿刚才那个高阶组件举例吧，还是同样的方法，把params注入给Detail的props。

import { useNavigate, useParams } from "react-router-dom";

export default function enhanceUseNavigate(Component) {

//这里要通过函数式组件注入，因为类组件里不能用噢

return function (props) {

let navigate = useNavigate();

let params = useParams();

let router = { navigate, params };

return

}

}

最后来到Detail组件，可以直接读取，参数传过来放到对象里，我们就能去读它的id，或者用它发请求什么的。

import React, { PureComponent } from 'react';

import enhanceUseNavigate from '../utils/enhanceUseNavigate';

export class Detail extends PureComponent {

render() {

let { params } = this.props.router;

console.log(params);//{id: '123'}

return (

)

}

}

export default enhanceUseNavigate(Detail)

2.参数直接拼接到url中（query）

类似vue中的query参数

直接在跳转的地方拼接url参数，那么怎么接呢？

这里用到另一个hook：useSearchParams

当然在函数式组件中用会比较合适，但是这里我们在类中演示吧，还是用高阶组件，拿之前那个举例：

import { useNavigate, useParams, useSearchParams } from "react-router-dom";

export default function enhanceUseNavigate(Component) {

//这里要通过函数式组件注入，因为类组件里不能用噢

return function (props) {

// 1.导航

const naviagte = useNavigate()

// 2.动态路由的参数

const params = useParams()

// 3.查询字符串的参数

const [searchParams] = useSearchParams()

// console.log(searchParams.get('name'))

const query = Object.fromEntries(searchParams.entries())

console.log(query);

const router = { naviagte, params, query}

return

}

}

这里的写法没怎么见过，先记住吧。总之就是把传过来的url参数变成一个对象，里面存着键值对格式的参数。同样我们注入到Login组件中，就可以接到参数了

import React, { PureComponent } from 'react'

import enhanceUseNavigate from '../utils/enhanceUseNavigate';;

export class Login extends PureComponent {

render() {

let { query } = this.props.router;

return (

)

}

}

export default enhanceUseNavigate(Login)

五、路由的配置文件

目前我们所有的路由都配置在组件中，用标签的形式写出来的，这样会比较乱，那么我们想像vue一样有自己的独立配置，react给我们提供了这样的hook

比如我们要把下面这一堆路由关系配置成一个单独的文件

大概就是这样的：

import Home from '../pages/Home';

import Login from '../pages/Login';

import Detail from '../pages/Detail';

import NotFound from '../pages/NotFound';

import Column1 from '../pages/Column1';

import Column2 from '../pages/Column2';

import Column3 from '../pages/Column3';

import { Navigate } from 'react-router-dom';

let routes = [

{

path:'/',

element: //重定向

},

{

path:'/home',

element: ,

children: [

{

path:'/home',

element: //重定向

},

{

path:'/home/column1',

element:

},

{

path:'/home/column2',

element:

},

{

path:'/home/column3',

element:

}

]

},

{

path:'/detail/:id',

element:

},

{

path:'/login',

element:

},

{

path: '*',

element:

}

]

export default routes;

然后在App中需要导入routes，并且使用hook占位：

ok搞定

六、路由的懒加载

两步 1、换成这个

2、包个标签

import { Suspense } from 'react';

......

root.render(

路由懒加载加载中！！}>

);

这里fallback里的东西是加载没出来的时候显示的东西

文章来源

 您阅读本篇文章共花了：