学习使用react-router

最新推荐文章于 2023-11-20 21:16:03 发布
最新推荐文章于 2023-11-20 21:16:03 发布
阅读量212 收藏
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CS_DGD/article/details/107334309
版权

为什么需要路由

当应用变得复杂的时候，就需要分块的进行处理和展示，传统模式下，我们是把整个应用分成了多个页面，然后通过 URL 进行连接。
但是这种方式也有一些问题：每次切换页面都需要重新发送所有请求和渲染整个页面，不止性能上会有影响，同时也会导致整个 JavaScript 重新执行，丢失状态。

SPA

Single Page Application : 单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容

优点：

  • 有更好的用户体验（减少请求和渲染和页面跳转产生的等待与空白），页面切换快
  • 重前端，数据和页面内容由异步请求（AJAX）+ DOM 操作来完成，前端处理更多的业务逻辑

缺点：

  • 首次进入处理慢
  • 不利于 SEO

SPA 的页面切换机制

虽然 SPA 的内容都是在一个页面通过 JavaScript 动态处理的，但是还是需要根据需求在不同的情况下分内容展示，如果仅仅只是依靠 JavaScript 内部机制去判断，逻辑会变得过于复杂，通过把 JavaScript 与 URL 进行结合的方式：JavaScript 根据 URL 的变化，来处理不同的逻辑，交互过程中只需要改变 URL 即可。这样把不同 URL 与 JavaScript 对应的逻辑进行关联的方式就是路由，其本质上与后端路由的思想是一样的。

前端路由

前端路由只是改变了 URL 或 URL 中的某一部分，但一定不会直接发送请求，可以认为仅仅只是改变了浏览器地址栏上的 URL 而已，JavaScript 通过各种手段处理这种 URL 的变化，然后通过 DOM 操作动态的改变当前页面的结构

  • URL 的变化不会直接发送 HTTP 请求
  • 业务逻辑由前端 JavaScript 来完成

目前前端路由主要的模式：

  • 基于 URL Hash 的路由
  • 基于 HTML5 History API 的路由

初步了解hash

我们先看一下hash是什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <a href="#view1">视图1</a>
    <a href="#view2">视图2</a>
    <a href="#view3">视图3</a>

    <div id="view"></div>

    <script>
        function getHash(){
            console.log(window.location.hash)

            view.innerHTML = window.location.hash
        }

        window.addEventListener("hashchange",getHash)
    </script>
</body>
</html>

浏览器反馈
在这里插入图片描述
这里我们可以看出，每次点击不同的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 <h1>首页</h1>
}

//src-->view-->about.js
import React from 'react'
export default function AboutPage (){
    return <h2>关于我们</h2>
}

//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 <div>
        <Route path="/" component={IndexPage } />
        <Route path="/about" component={AboutPage} />
    </div>
}

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(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
  1. HashRouter 组件
import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter} from 'react-router-dom'
import App from './app';

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById('root')
);

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

浏览器反馈
在这里插入图片描述
在这里插入图片描述

exact

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

现在我们的页面是显示了，但是可以看出，在首页的时候没什么问题，但是在about页面时，我们的index页面内容也显示了出来
错误原因：path中：匹配url的方式不是相等，而是以 指定的url 开头
处理方式：使用exact严格模式

<Route path="/" exact component={IndexPage} />
<Route path="/about" exact component={AboutPage} />

浏览器反馈
在这里插入图片描述
现在我们的页面问题已经得到处理了

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 <nav>
        <Link to="/" >首页</Link>
        <span> | </span>
        <Link to="/about" >关于我们</Link>
    </nav>
}

// 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 <div>
        
        <Nav />
        
        <Route path="/" exact component={IndexPage } />
        <Route path="/about" exact component={AboutPage} />
    </div>
}

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 <nav>
        <NavLink  to="/" exact
            activeStyle={{
                color:'red'
            }}
        >首页</NavLink>
        <span> | </span>
        <NavLink  to="/about"  exact
            activeStyle={{
                color:'red'
            }}
        >关于我们</NavLink>
    </nav>
}

浏览器反馈
在这里插入图片描述
在这里插入图片描述

activeClassName

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

		<NavLink  to="/" exact
            activeClassName="active"
        >首页</NavLink>
        
        <span> | </span>
        
        <NavLink  to="/about"  exact
            activeClassName="active"
        >关于我们</NavLink>

浏览器反馈
在这里插入图片描述
在这里插入图片描述

传递 props

如果 Route 使用的是 component 来指定组件，那么不能使用 props，但是render的话可以
render 属性来指定渲染函数，render 属性值是一个函数，当路由匹配的时候指定该函数进行渲染

//app.js
...
	<Route path="/" exact render={()=>{
		return <IndexPage user={user} setUser={setUser}/>
	}} />
...

// ./view/index.js
import React from 'react'

export default function IndexPage (props){
    console.log(props)
    return <h1>首页</h1>
}

浏览器反馈
在这里插入图片描述

路由参数

  • 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 <h1>首页</h1>
}

// app.js

import React from 'react';
...

function App() {
    return <div>
            <Route path="/" exact component={IndexPage} />
            ...
    </div>
}

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 <h1>关于</h1>
}

浏览器反馈
在这里插入图片描述

  • match : 当前路由匹配的相关规则
    • params : 动态路由传过来的参数
// src-->view-->about.js

import React from 'react';
export default function AboutPage(props){
    let {match} = props;
    console.log(match);
    
    return <h1>关于</h1>
}

浏览器反馈
在这里插入图片描述

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 <h1>inner</h1>
}
export default InnerPage

// about.js
import React from 'react';
import Inner from './inner'

export default function AboutPage(props){
    return <div>
        <h1>关于</h1>
        <Inner></Inner>
    </div>
}

浏览器反馈
在这里插入图片描述
看一看到我们是输出不出来props的，但我们做一点修改就可以了

import React from 'react';
import {withRouter} from 'react-router-dom'

function InnerPage(props){
	console.log(props);
    return <h1>inner</h1>
}
export default withRouter(InnerPage)

浏览器反馈
在这里插入图片描述

switch

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

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

// src-->view-->Page404.js
import React from 'react';

export default function Page404(){
    return <h1>Page404</h1>
}

// app.js
import React from 'react';
...
import { Route, Switch } from 'react-router-dom';

function App() {
    return <div>
        <Switch>
        	<Page404 component={Page404}/>
            <Route path="/" exact component={IndexPage} />
            <Route path="/about" exact component={AboutPage} />
        </Switch>
    </div>
}

export default App

浏览器反馈
在这里插入图片描述
在这里插入图片描述
这种情况就是因为我们的代码书写位置不对造成的，调整一下代码位置即可

        <Switch>
            <Route path="/" exact component={IndexPage} />
            <Route path="/about" exact component={AboutPage} />
        	<Page404 component={Page404}/>
        </Switch>

浏览器反馈
在这里插入图片描述
在这里插入图片描述

获取路由参数是component与render的区别

我们按照render的方式书写的话可能直接会写成以下代码

// src-->view-->index.js

...
export default function IndexPage(props){
	console.log(props)
	...
}


// app.js

...
function App() {
     return <div>
        <Switch>
            <Route path="/" exact render={()=>{
                return <IndexPage></IndexPage>
            }} />
            <Page404 component={Page404} />
        </Switch>
    </div>
}

export default App

浏览器反馈
在这里插入图片描述
看亏给我们的内容可以看出我们没有获取到路由参数，我们这里应该做一点调整，在调用时给他传递一些参数

<Route path="/" exact render={(props)=>{
	return <IndexPage {...props}></IndexPage>
}} />

浏览器反馈
在这里插入图片描述
传递参数后，我们就可以获取到路由参数了

动态路由

// src-->view-->index.js
...
export default function IndexPage(props){
	return <div>
        <h1>留言列表</h1>
        <NavLink to="/list/1">1</NavLink>
        <span> | </span>
        <NavLink to="/list/2">2</NavLink>
        <span> | </span>
        <NavLink to="/list/3">3</NavLink>
    </div>
}

// app.js
...
function App() {
    return <div>
        <Switch>
            <Route path="/list/:page" exact render={(props)=>{
                return <IndexPage {...props}></IndexPage>
            }} />
            <Page404 component={Page404} />
        </Switch>
    </div>
}

export default App

浏览器反馈
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们这个时候就实现了动态路由，我们也可以通过Params获取到动态路由传递过来的参数

// src-->view-->index.js
...
export default function IndexPage(props){
	console.log(useParams())
	return ...
}

在这里插入图片描述

X可乐
关注
export 和 export default 的区别
02-03 390
export命令用于规定模块的对外接口。 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。 // profile.js export var firstName = 'Michael'; export var lastName = 'Ja...
React语法简单总结
duansamve的博客
03-15 565
一、JSX： 二、创建组件的两种方式： 1、构造函数： 2、class： 具体实现： import React, { Component } from 'react' // 如果使用 class 定义组件， 必须让自己的组件继承自 export default class 组件名 extends React.Component { // 在组件内部必须有 render 函...
React基础知识点
最新发布
m0_70033038的博客
11-20 217
一个组件必须是大写字母开头，不然不会生效。第一步：导出组件是语法，意思是默认导出，一个组件里面只能有一个默认导出。这样允许你能够在另外一个组件引用它。第二步：定义函数第三步：添加标签这个组件允许返回标签，看似是，但实际上是，这种语法被称为返回语句可以写在一行上 也可以像上面的例子一样用注意：组件不能嵌套定义而且应该在顶层声明组件总结：export - JavaScript | MDN (mozilla.org)默认导入和具名导出是原本的语法，一个页面可以有多个具名导出。例： 但是只能有一个默认导出
React基本认识：
Guqiancheng的博客
09-24 177
1、写的代码全部渲染在index.html当中。 2、导入图片：可以直接import图片，然后使用{}进行调用。 3、导出/导入组件：export default 导出函数式组件。 4、函数式的组件使用JSX语法，需要导入React。导入React-dom则是为了渲染页面。 5、 ...
React：五、React脚手架应用
a232884c的博客
07-02 712
1 前言react脚手架搭建react应用： 执行第二步前，可以打开cmd，做如下配置，再次执行第二步会快些： 出现如下即创建成功 然后通过vscode打开项目文件夹，ctrl+`，执行npm start: 2 使用2.1 项目结构介绍public一般存放静态资源：.ico：网站的图标 index.html：%PUBLIC_URL%可改为.(当前路径)： public的index.html（react应用仅1个index.html，即SPA，single page web application 单页
react-router:react-router 中文文档
04-29
react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react-...
koa-react-router：用于koa 2的react-router中间件
02-03
koaReact路由器 koa 2中间件，用于React... import reactrouter from 'koa-react-router' ; import App from './App' ; import Container from './containers/PageContainer' ; const app = new Koa ( ) ; app
mobx-react-router:使MobX状态与react-router保持同步
04-22
该分支（主节点）与react-router v4一起使用。 如果您正在寻找与react-router v3一起使用的绑定，请转到。 安装 npm install --save mobx-react-router 如果尚未安装所有对等依赖项，则可能现在应该这样做： npm ...
关于react-router/react-router-dom v4 history不能访问问题的解决
11-28
总结一下，`react-router-dom` v4版本中，要访问`history`对象，需要在应用中使用`BrowserRouter`作为顶级容器，并在子组件中声明`contextTypes`以接收`router`对象。这样，我们就可以在任何组件中实现动态的页面...
react-breadcrumbs:React-Router的自动面包屑
05-02
如果您需要与React-Router v3及更低版本兼容的版本，请使用 npm install --save react-breadcrumbs@1.6.x 演示版 /demo目录提供了如何使用此软件包的一个示例。 有关为小型站点供电的代码，请参见 。 用法 该软件包...
react中import导入时带与不带花括号{}，以及export与export default
dong123ohyes的专栏
04-08 1622
目录 1.不带花括号{}，引用js文件中默认导出（export default）的模块 2.带花括号{}，引用js文件中export导出的同名模块 3.总结 在使用import语法引用模块时，如何正确使用{} 例如：有两个文件，home.js、user.js 当需要在home.js中引入user.js的时候 1.不带花括号{}，引用js文件中默认导出（export default）的模块 import模块时的可随意命名。 //home.js import user from './u
React 组件使用
wbskb的博客
07-22 585
React 组件是一个 js 函数，函数可以添加 jsx 标记
Context使用方法过程记录！！！！
weixin_45006814的博客
08-25 291
【代码】Context使用方法过程记录！！！！
React 组件之间传值
qq_40057138的博客
08-20 1万+
一、父组件向子组件传值 父组件代码 import React, { Component } from 'react' import {HashRouter as Router, Route,Link} from 'react-router-dom' import Child from './Child' export default class Parent extends Component { constructor(){ super() this.state=
React教程（详细版）
热门推荐
Ronychen的博客
03-19 20万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
React export和export default的区别
赵英超的博客
09-07 1万+
es6中export和export default的区别 export与export default均可用于导出常量、函数、文件、模块 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用 在一个文件或模块中，export、import可以有多个，export default仅有一个 通过export方式导...
react 代码分割 export && export default
lucky569的博客
08-03 838
代码分割 其实就是为了避免打包时候的代码体积过大而导致加载时间过长出现的一种优化手段吧.简单来说也就是引入并使用外部js文件的方法,使用代码分割有两种写法,推荐第二种. 第一种:我在math.js里面export了一个add函数 import("./math.js").then(math => { console.log(math.add(1, 2)) // 3 }); 第二种使用方式 // 头部引入文件 import { add } from './math'; //使用如下: cons
vue组件之属性Props
weixin_33816821的博客
05-27 475
组件的属性和事件 父子组件之间的通信 父子组件之间的通信就是 props down,events up，父组件通过 属性props向下传递数据给子组件，子组件通过 事件events 给父组件发送消息。 比如，子组件需要某个数据，就在内部定义一个prop属性，然后父组件就像给html元素指定特性值一样，把自己的data属性传递给子组件的这个属性。 而当子组件内部发生了什么事情的时候，就通过自定义事件...
深入解析react-router@4.0：使用与源码剖析
文章提到了react-router-dom@4.3.0或react-router@4.4.1的相关内容，并在示例中讲解了如何设置router.js和入口文件index.js，以及一个简单的home.js组件的实现。" 在React应用中，路由管理是至关重要的，特别是在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值