React学习笔记七——React-router-web的使用详解

2401_84092398

于 2024-05-13 15:49:29 发布

阅读量214

点赞数 5

分类专栏：程序员文章标签： react.js 前端学习

本文链接：https://blog.csdn.net/2401_84092398/article/details/138806456

版权

程序员专栏收录该内容

284 篇文章 0 订阅

订阅专栏

//匹配到第一个user路由组件，显示该组件

//不显示该组件

< Redirect >

渲染将使导航到一个新的地址。这个新的地址会覆盖 history 栈中的当前地址
一般写在路由的最下方，当所有路由无法匹配时，跳转到Redirect指定的路由

嵌套路由

===================================================================

在这里插入图片描述

嵌套路由代码案例

import React from “react”;

import { BrowserRouter as Router, Route, Link } from “react-router-dom”;

// 路由组件

const Main = () =>

Main

;

const Sandwiches = () =>

Sandwiches

;

const Tacos = ({ routes }) => (

Tacos

Bus
Cart
{routes.map((route, i) => <RouteWithSubRoutes key={i} {…route} />)}

);

const Bus = () =>

Bus
;

const Cart = () =>

Cart
;

// 路由配置

const routes = [

{

path: “/sandwiches”,

component: Sandwiches

},

{

path: “/tacos”,

component: Tacos,

routes: [

{

path: “/tacos/bus”,

component: Bus

},

{

path: “/tacos/cart”,

component: Cart

}

]

}

];

//对路由组件容器的二次封装

const RouteWithSubRoutes = route => (

<Route

path={route.path}

render={props => (

<route.component {…props} routes={route.routes} />

)}

/>

);

const RouteConfigExample = () => (
Tacos
Sandwiches
{routes.map((route, i) => <RouteWithSubRoutes key={i} {…route} />)}

);

export default RouteConfigExample;

路由传参

===================================================================

向路由组件传递params参数
- 路由链接（携带参数）：< link to=“/demo/tom/18”></ link >
- 注册路由（接收参数）：< Route path=“/demo/:name/:age” component={Test}></ Route >
- 接收参数：const {name ,age} = this.props.match.params
import React from “react”;

import { BrowserRouter as Router, Route, Link } from “react-router-dom”;

const ParamsExample = () => (

Accounts
Netflix
Zillow Group
Yahoo
Modus Create
);

const Child = ({ match }) => (

ID: {match.params.id}

);

export default ParamsExample;

向路由组件传递search参数
- 路由链接（携带参数）： < Link to=“/demo?id=$ {info.id}&name=${info.name}” >{info.name}</ Link >
- 注册路由（无需接收参数）： < Route path=“/demo” component={Demo} />
- 接受参数：const {search} = this.props.location ， const {id,name} = qs.parse(search.slice(1))
备注：路由组件接受参数由于是search参数：“?id=Netflix&name=Netflix”（urlencoded编码字符串），所以需要一个【querystring库】转化成"{id:‘Netflix’,name:‘Netflix’}"的格式

import React from “react”;

import { BrowserRouter as Router, Route, Link } from “react-router-dom”;

//不用安装，react脚手架已经下载好了，直接引入用

//将“?id=Netflix&name=Netflix”转换成一个对象{id:‘Netflix’,name:‘Netflix’}的库

import qs from “querystring”;

//举例子说明querystring库的使用

let obj= {name:‘tom’,age:18}

console.log(qs.stringify(obj)) //name=tom&age=18 urlencoded编码

let str = “name=tom&age=18”

console.log(qs.parse(str)) // {name:‘tom’,age:18}

export default class Test extends React.Component {

state = {

infos:[

{id:‘Netflix’,name:‘Netflix’},

{id:‘Zillow Group’,name:‘Zillow Group’}

]

}

render(){

const {infos} = this

return (

Accounts
{

infos.map((info) => {

return (
{info.name}
)

})

}

{/* search参数无需接受 */}

)

}

}

class Demo extends React.Component{

const {search} = this.props.location

const {id,name} = qs.parse(search.slice(1))

render(){

return (

ID: {id}

NAME: {name}

)

}

}

向路由组件传递state参数
- 路由链接（携带参数）： < Link to={{pathname:’/demo’,state:{id:info.id,name:info.name}}} >{info.name}</ Link >
- 注册路由（无需接收参数）： < Route path=“/demo” component={Demo} />
- 接受参数： const {id,name} = this.props.location.sate
import React from “react”;

import { BrowserRouter as Router, Route, Link } from “react-router-dom”;

export default class Test extends React.Component {

state = {

infos:[

{id:‘Netflix’,name:‘Netflix’},

{id:‘Zillow Group’,name:‘Zillow Group’}

]

}

render(){

const {infos} = this

return (

Accounts
{

infos.map((info) => {

return (
{info.name}
)

})

}

{/* state参数无需接受 */}

)

}

}

class Demo extends React.Component{

//接收state参数

const {id,name} = this.props.location.sate

render(){

return (

ID: {id}

NAME: {name}

)

}

}

编程式路由导航

======================================================================

最常用的方法：replace()、push()、goback()、go()

注意只有路由组件才能使用以上编程式路由导航

import React from “react”;

import { BrowserRouter as Router, Route, Link } from “react-router-dom”;

export default class Test extends React.Component {

state = {

infos:[

{id:‘Netflix’,name:‘Netflix’},

{id:‘Zillow Group’,name:‘Zillow Group’}

]

}

clickKip = (id，name) => {

this.props.history.push(/demo/${id}/${name}) //无历史记录的跳转，可以回退

this.props.history.replace(/demo/${id}/${name}) //替换路由跳转

}

render(){

const {infos} = this

return (

Accounts
{

infos.map((info) => {

return (
this.clickKip(info.id,info.name)}>{info.name}
)

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
me}

)

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-GB0nGpBd-1715586557890)]

[外链图片转存中…(img-Vvh85kOo-1715586557890)]

[外链图片转存中…(img-yoACJ4T5-1715586557890)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84092398

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
React学习笔记七——React-router-web的使用详解

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫