学习使用react-router

浏览器反馈

这里我们可以看出，每次点击不同的a标签，输出在控制台上的数据都不一样

对他有一个简单认识之后，我们再来看一下，基于hash的路由

React Router

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

安装

---

npm i -S react-router-dom

准备数据

---

//src–>view–>index.js

import React from ‘react’

export default function IndexPage (props){

console.log(props)

return

首页

}

//src–>view–>about.js

import React from ‘react’

export default function AboutPage (){

return

关于我们

}

//app.js

import React from ‘react’

import {Route} from ‘react-router-dom’

import IndexPage from ‘./view/index’

import AboutPage from ‘./view/about’

function App() {

return

<Route path=“/” component={IndexPage } />

}

export default App

浏览器反馈

这里的报错原因是因为，他需要在入口文件当中，单独引入路由组件，并将你的所有内容全部包裹起来

1. BrowserRouter 组件

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import {BrowserRouter} from ‘react-router-dom’

import App from ‘./app’;

ReactDOM.render(

,

document.getElementById(‘root’)

);

2. HashRouter 组件

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import {HashRouter} from ‘react-router-dom’

import App from ‘./app’;

ReactDOM.render(

,

document.getElementById(‘root’)

);

这两个组件在开发环境中没有任何区别，在生产环境中的区别是hash在路径上会有一个#号，而browser没有

浏览器反馈

exact

---

exact 属性表示路由使用 精确匹配模式，非 exact 模式下 '/' 匹配所有以 '/' 开头的路由

现在我们的页面是显示了，但是可以看出，在首页的时候没什么问题，但是在about页面时，我们的index页面内容也显示了出来

错误原因：path中：匹配url的方式不是相等，而是以 指定的url 开头

处理方式：使用exact严格模式

浏览器反馈

现在我们的页面问题已经得到处理了

Link 组件

---

Link 组件用来处理 a 链接 类似的功能（它会在页面中生成一个 a 标签），但设置这里需要注意的，react-router-dom 拦截了实际 a 标签的默认动作，然后根据所有使用的路由模式（Hash 或者 HTML5）来进行处理，改变了 URL，但不会发生请求，同时根据 Route 中的设置把对应的组件显示在指定的位置

to 属性类似 a 标签中的 href

// src–>component–>nav.js

import React from ‘react’

import {Link} from ‘react-router-dom’

export default function Nav(){

return

首页

|

关于我们

}

// app.js

import React from ‘react’

import {Route} from ‘react-router-dom’

import IndexPage from ‘./view/index’

import AboutPage from ‘./view/about’

import Nav from ‘./component/nav’

function App() {

return

<Route path=“/” exact component={IndexPage } />

}

export default App

浏览器反馈

作用

• Link——只改变URL

• Router——匹配URL

NavLink

---

NavLink 与 Link 类似，但是它提供了两个特殊属性用来处理页面导航

activeStyle

当 当前 URL 与 NavLink 中的 to 匹配的时候，激活 activeStyle 中的样式也就是说被选中的时候

import React from ‘react’

import {NavLink} from ‘react-router-dom’

export default function Nav(){

return

<NavLink to=“/” exact

activeStyle={{

color:‘red’

}}

首页

|

<NavLink to=“/about” exact

activeStyle={{

color:‘red’

}}

关于我们

}

浏览器反馈

activeClassName

与 activeStyle 类似，但是激活的是 className

<NavLink to=“/” exact

activeClassName=“active”

首页

|

<NavLink to=“/about” exact

activeClassName=“active”

关于我们

浏览器反馈

传递 props

---

如果 Route 使用的是 component 来指定组件，那么不能使用 props，但是render的话可以

render 属性来指定渲染函数，render 属性值是一个函数，当路由匹配的时候指定该函数进行渲染

//app.js

…

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

return

}} />

…

// ./view/index.js

import React from ‘react’

export default function IndexPage (props){

console.log(props)

return

首页

}

浏览器反馈

路由参数

---

• history : 历史记录以及路由给我们的一些操作

• history.go(-1)

• goBack 返回一步 使用较多

• goForward

// src–>view–>index.js

import React from ‘react’;

export default function IndexPage(props){

let {history} = props;

console.log(history)

return

首页

}

// app.js

import React from ‘react’;

…

function App() {

return

…

}

export default App

浏览器反馈

这里的path与replace都是用来切换当前URL的，但是path比replace多一个回退功能

• location : 获取当前URL的一些信息

• pathname : 当前的URL

• search : 接口参数

• state : 跳转路由时，传递的参数

// src–>view–>about.js

import React from ‘react’;

export default function AboutPage(props){

let {location} = props;

console.log(location);

return

关于

}

浏览器反馈

• match : 当前路由匹配的相关规则

• params : 动态路由传过来的参数

// src–>view–>about.js

import React from ‘react’;

export default function AboutPage(props){

let {match} = props;

console.log(match);

return

关于

}

浏览器反馈

hooks (Router5.0之后出现的)

---

使用的只是一个简单的函数式组件，但是想使用路由参数又不想用withRouter的话可以使用以下四个方法

注意不要在类组件内使用

• useHistory : 获取History对象

• useLocation : 获取Location对象

• useParams : 获取Params

• useRouteMatch : 获取Match

withRouter 组件(高阶组件，高阶函数，高阶路由)

---

如果一个组件不是路由绑定组件，那么该组件的 props 中是没有路由相关对象的，虽然我们可以通过传参的方式传入，但是如果结构复杂，这样做会特别的繁琐。幸好，我们可以通过 withRouter 方法来注入路由对象

// src–>view–>inner.js

import React from ‘react’;

function InnerPage(props){

console.log(props)

return

inner

}

export default InnerPage

// about.js

import React from ‘react’;

import Inner from ‘./inner’

export default function AboutPage(props){

return

关于

}

浏览器反馈

看一看到我们是输出不出来props的，但我们做一点修改就可以了

import React from ‘react’;

import {withRouter} from ‘react-router-dom’

function InnerPage(props){

console.log(props);

return

inner

}

export default withRouter(InnerPage)

浏览器反馈

switch

---

有点类似于switch…case，按顺序判断，符合那个就执行那个，其他的全都不执行。也就是说该组件只会渲染首个被匹配的组件

注意点：使用时如果有404页面需注意摆放位置

// src–>view–>Page404.js

import React from ‘react’;

export default function Page404(){

return

Page404

}

// app.js

import React from ‘react’;

…

import { Route, Switch } from ‘react-router-dom’;

function App() {

return

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

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

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

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

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

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后

资料过多，篇幅有限，需要文中全部资料可以点击这里即可获取前端面试资料PDF完整版！

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

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

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

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

[外链图片转存中…(img-qt2LcfbN-1711767238980)]

[外链图片转存中…(img-OsccMf7L-1711767238981)]

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

[外链图片转存中…(img-VPeMTDmn-1711767238981)]

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

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后

[外链图片转存中…(img-eDlDmeew-1711767238982)]

[外链图片转存中…(img-ynM05Iwh-1711767238982)]

资料过多，篇幅有限，需要文中全部资料可以点击这里即可获取前端面试资料PDF完整版！

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。