2024年最全React学习笔记七——React-router-web的使用详解，2024年最新如何获得大厂面试机会

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

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

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

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

  )

  })

  }

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

  )

  }

  }

  class Demo extends React.Component{

  //接收state参数

  紧跟潮流

  大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

  这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

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