2024年前端最全React学习笔记七——React-router-web的使用详解(1)，面试加分项徐强 百度网盘

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

< 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’}

  学习笔记

  主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  HTML/CSS

  **HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

  **CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

  

  HTML5 /CSS3

  **HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

  **CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

  

  JavaScript

  **JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

  

  结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

  **CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

  [外链图片转存中…(img-pZsk6Rjx-1715501940112)]

  HTML5 /CSS3

  **HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

  **CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

  [外链图片转存中…(img-AyDgHBZK-1715501940113)]

  JavaScript

  **JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

  [外链图片转存中…(img-QXjNAIwP-1715501940113)]