React-Router——Reac路由的学习

• 使用<Route/>实现路由

1.先引入Router,Redirect,Switch

import {Route,Redirect,Switch} from "react-router-dom"

2.通过Route组件，可以进行路由访问了,Route里面的path代表路径，component代表映射的路由组件

<Route path="/home" component={Home}/>

3.Switch代表内部的Route只会匹配一个，匹配到了就不会向下执行

内部实现原理

switch(Route.path){ // /home/a

case ‘/home’: //模糊匹配

break;

case “/home/a”: //模糊匹配

break;

}

4.Redirect代表重定向，to代表跳到目标路由地址，from代表来自哪个路径 （默认内部不是完全匹配的）

<Redirect to="/home" from="/" />

5.exact属性代表url地址栏的路径与Route的path完全一致的时候，component才会渲染。

App.js文件

import React, { Component } from ‘react’

import {Route,Redirect,Switch} from “react-router-dom”

import Home from “./views/Home”

import Article from “./views/Article”

import NotFound from “./views/NotFound”

//通过Route组件，可以进行路由访问了

//Route里面的path代表路径，component代表映射的路由组件

//Switch代表内部的Route只会匹配一个，匹配到了就不会向下执行

//Redirect代表重定向，to代表跳到目标路由地址，from代表来自哪个路径 （默认内部不是完全匹配的）

//exact属性代表url地址栏的路径与Route的path完全一致的时候，component才会渲染。

export default class App extends Component {

render() {

return (

看看url地址栏里面有没有包含/home,有就渲染

)

}

}

• 可以通过NavLink实现a标签的切换效果，渲染成a标签，并且带有active的class样式

.active{

color:red

}

import {Route,Redirect,Switch,NavLink as Link} from “react-router-dom”

import “./index.css”

export default class App extends Component {

state = {

isLogin:true

}

render() {

return (

• 首页
• 文章列表

• 看看url地址栏里面有没有包含/home,有就渲染

  )

  }

  }

  

  二级路由及动态跳转

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

  Article.js文件

  export default class Article extends Component {

  render() {

  return (

  文章列表Article

  文章一

  文章二

  )

  }

  }

  ArticleDetail.js文件

  export default class ArticleDetail extends Component {

  render() {

  return (

  articleDetail

  )

  }

  }

  App.js文件

  一级路由 <Route path="/article" component={Article} exact/>

  二级动态路由 <Route path="/article/:id" component={ArticleDetail}/>

  export default class App extends Component {

  state = {

  isLogin:true

  }

  render() {

  return (
• 首页
• 文章列表

• /article/1

  //二级动态路由

  )

  }

  }

  

  路由常用API方法

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

  render函数

  ---

  • 一旦通过Route组件的component属性指明的组件，那么这个路由组件上面就会有路由相关的api

  例如(location / history / match)

  在ArticleDetail.js文件中输出this.props

  export default class ArticleDetail extends Component {

  render() {

  console.log(this.props) //{history: {…}, location: {…}, match: {…}, staticContext: undefined}

  return (

  articleDetail

  )

  }

  }

  this.props输出

  

  

  可以通过this.props.match.params得到动态id

  

  • 但是如果必须要传入属性的话，单纯使用component是解决不了的。

  需要用render函数

  state = {

  isLogin:true

  }

  可以在state中添加一个状态,如果是真的话,就渲染首页Home.js

  必须传入routerProps并且通过解构传入{...routeProps}才可以在props中得到api,否则this.props为空

  <Route path=“/home” render={(routeProps)=>{

  return this.state.isLogin?<Home x={1} {…routeProps}/>:“未登录”

  }}/>

  在Home.js中打印this.props

  import React, { Component } from ‘react’

  export default class Home extends Component {

  render() {

  //只要 组件就称为路由组件了，那么这个就可以通过this.props match/location/history

  console.log(“home”,this.props)

  return (

  Home组件

  )

  }

  }

  

  

  link的参数传递

  ---

  • 1.可以通过动态路由的方式进行参数传递

  <Router path="/detail/:id component={组件名} />

  Detail组件内部可以通过this.props.match.params.id可以获取到动态参数

  • 2.可以通过query进行传参

  <Router path="/detail?title=文章一" component={组件名} />

  Detail组件内部可以通过 this.props.location.search可以获取到 “?title=文章一”

  • 3.可以通过state进行隐式传参

  <Link to={{ pathname:"/article/2",state:{title:"文章2"}}}>文章二</Link>

  Detail组件内部可以通过 this.props.location.state.title可以获取到

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

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

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

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  最后

  分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载

  ❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

  b前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

  [外链图片转存中…(img-WMmJcplG-1713552708803)]

  [外链图片转存中…(img-8vU8aXXT-1713552708804)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  [外链图片转存中…(img-Z6oT3guQ-1713552708804)]

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

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  [外链图片转存中…(img-TP6FVd25-1713552708804)]

  最后

  分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载

  ❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。