react-路由

于 2023-10-07 10:07:01 发布
阅读量144 收藏
点赞数
分类专栏： 前端 react 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40561863/article/details/133633221
版权

前端路由

前端根据不同的地址，对应渲染不同的组件或页面。

前端路由一般分为两种：

  • hash:以#代表hash值，这个给浏览器识别，根据这个hash值来切换显示不同的内容，这个hash值不会发送给后端，能够兼容低版本的浏览器。

    http://localhost:8000/#/login

  • history：相比于hash路由，history路由更好看，它会发送给服务端，如果前端的路由和后端服务器的路由一样的话，那么会访问服务器路由，上线后需要后端配合才能使用。

    http://localhost:8000/login

react路由的安装

react本身没有提供路由，我们需要安装第三方插件react-router-dom

react路由v6版本地址：https://reactrouter.com/en/6.8.1/start/overview

v5版本地址：https://v5.reactrouter.com/

v6版本更偏向于函数式组件开发

v5版本兼容类组件和函数组件开发。

1）安装路由

yarn add react-router-dom@5.3.4
# or
npm i react-router-dom@5.3.4

2）配置一级路由

App.jsx

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Login from "./pages/Login";
import Home from "./pages/Home";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/login">登录页面</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Home.jsx

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>Home</div>
    )
  }
}

Login.jsx

import React, { Component } from 'react'

export default class Login extends Component {
  render() {
    return (
      <div>Login</div>
    )
  }
}

react路由匹配信息

路由器

BrowserRouter：代表history路由模式，

HashRouter：代表hash路由模式

路由器应该放在最外层，其他的路由组件都应该包裹在内。否则会报错如下：

image-20230222171541782

路径匹配器

Switch

类似于js中switch条件判断，它匹配到路径后只渲染匹配到的哪个Route组件，如果没有匹配到，就不会渲染页面

路由匹配是模糊匹配，如果路径是/，那么下面的路由路径都匹配不到，导致其他页面渲染不出来。

解决方案：

1）将/路径放到最下面

<Switch>
    <Route path="/login">
      <Login />
    </Route>
    <Route path="/register">
      <Register />
    </Route>
    <Route path="/">
      <Home />
    </Route>
</Switch>

2）使用exact精确匹配

<Switch>
    <Route path="/" exact>
      <Home />
    </Route>
    <Route path="/login">
      <Login />
    </Route>
    <Route path="/register">
      <Register />
    </Route>
</Switch>
Route

将路由路径与组件进行映射，当路径匹配成功后，则渲染对应的页面组件，否则就不会渲染。

  • path
    设置路由路径

  • exact：代表精确匹配，只能路由地址恰好与path的地址匹配上才算匹配成功。

    <Switch>
    <Route path="/" exact>
      <Home />
    </Route>
</Switch>

  • component：配置要渲染的页面组件（推荐使用）

    <Switch>
	<Route path="/login" component={Login}></Route>
</Switch>

  • render：是一个函数，也可以用于配置要渲染的页面组件

    <Switch>
    <Route path="/register" render={() => <Register />}></Route>
</Switch>

  • 嵌套的方式配置页面

    <Switch>
    <Route path="/" exact>
      <Home />
    </Route>
</Switch>

没什么特殊情况，建议使用component属性去配置页面组件。

导航

Link组件

用于跳转页面的组件，类似于vue中的router-link。

  • to：配置跳转页面的路径
    可以传递字符串，也可以是一个对象
    字符串方式：

    <Link to="/login">登录页面</Link>

    对象方式：

    <Link to={{pathname: '/register'}}>注册页面</Link>

  • replace：路由路径替换，当跳转页面后，那么回退页面时不会回退到刚刚的页面，而是回退到了上上个页面。

    <Link to={{pathname: '/register'}} replace>注册页面</Link>
Redirect组件

路由重定向。

  • from：匹配的路径来源，从哪里来
  • to：重定向到哪里去
  • exact：精确匹配
<Switch>
    <Redirect from="/register" to={'/login'} exact />
    <Route path="/" exact>
      <Home />
    </Route>
    <Route path="/login" component={Login}></Route>
    <Route path="/register" render={() => <Register />}></Route>
</Switch>

注意：Redirect建议写在最前面，如果写在后面可能匹配不到，无法生效。

二级路由

vue中嵌套路由配置：

{
    path: '/home',
    compoennt: Home,
    children: [
        {
            path: 'user',
            component: User
        }
    ]
}

二级路由配置

  1. 嵌套路由配置不需要嵌套加BrowserRouter和HashRouter。
  2. 嵌套路由配置需要加入父级路由，后面才是子路由路径父级路由/子路由
import React, { Component } from 'react'
import { Link, Route, Switch, Redirect } from 'react-router-dom'
import Students from './Students'
import Teacher from './Teacher'
import User from './User'

export default class Home extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to={'/home/teacher'}>教师管理</Link>
          </li>
          <li>
            <Link to={'/home/students'}>学生管理</Link>
          </li>
          <li>
            <Link to={'/home/user'}>用户管理</Link>
          </li>
        </ul>
        {/* 这里渲染对应页面 */}

        <Switch>
          <Redirect from='/home' to={'/home/teacher'} exact />
          <Route path={'/home/teacher'} component={Teacher}></Route>
          <Route path={'/home/students'} component={Students}></Route>
          <Route path={'/home/user'} component={User}></Route>
        </Switch>
      </div>
    )
  }
}

路由懒加载

前端目前的项目基本都是工程化项目单页面应用。

单页面应用一开始加载时就会将所有的文件加载出来，如果项目很大，会导致在首屏加载时时间过长，白屏时间长，用户体验不太好。

vue中解决：

{
    path: 'xxx',
    compoennt: () => import('./xxx.vue')
}

在react中，有两种方式去完成路由懒加载：

  1. 使用第三方插件
  2. 使用react官方的方式

使用了路由懒加载后，会在使用这个页面时才会去加载对应的页面，而不是一开始就全部加载页面。

首屏渲染速度得到了提升。

使用react-loadable插件

1）安装插件

npm i react-loadable
# or
yarn add react-loadable

2）引入插件

import Loadable from "react-loadable";

3）使用插件加载页面

const Login = Loadable({
  loader: () => import('./pages/Login'),
  loading: () => <div>正在加载中。。。。。。</div>
});

const Home = Loadable({
  loader: () => import('./pages/Home'),
  loading: () => <div>正在加载中。。。。。。</div>
});

const Register = Loadable({
  loader: () => import('./pages/Register'),
  loading: () => <div>正在加载中。。。。。。</div>
});

loader：加载的页面

loading：加载页面组件完成之前要渲染的加载组件。

使用react官方推荐的方式

  1. 使用React.Suspense包裹路由

    <React.Suspense fallback={<div>正在加载中。。。。。</div>}>
    <Switch>
      {/* <Redirect from="/register" to={'/login'} exact /> */}

      <Route path="/home" component={React.lazy(() => import('./pages/Home'))}></Route>
      <Route path="/login" component={React.lazy(() => import('./pages/Login'))}></Route>
      <Route path="/register" component={React.lazy(() => import('./pages/Register'))}></Route>

    </Switch>
  </React.Suspense>

    fallback：加载页面完成之前要渲染的一个loading组件

  2. 搭配React.lazy完成路由懒加载

     <Route path="/home" component={React.lazy(() => import('./pages/Home'))}></Route>

    路由参数

路由传递参数，在页面之间传递参数。

在react路由中，有四种参数传递方式：

prams动态路由

动态路由需要配置路由参数：

  1. 配置路由参数

    <Route path="/register/:id" render={() => <Register />}></Route>

  2. 跳转路由
    Link方式：

    <Link to={'/register/10'}>到注册页面</Link>

    js方式：

    this.props.history.push('/register/100');

  3. 参数获取
    动态路由参数是在this.props.match.params

    this.props.match.params

query的方式传参（不推荐）

通过对象的方式传递参数

  1. 跳转传递参数

    <Link to={{pathname: '/register', query: {id: '10'}}}>query跳转到注册页面</Link>

    js跳转

    this.props.history.push({
  pathname: '/register',
  query: {id: '100'}
});

  2. 获取参数

    this.props.location.query

注意：有坑

当刷新页面后，参数丢失。

state的方式传递参数（不推荐）

通过对象的方式传递参数

  1. 跳转传递参数

    <Link to={{pathname: '/register', state: {id: '1000'}}}>state跳转到注册页面</Link>

    js方式：

    this.props.history.push({
  pathname: '/register',
  state: {id: '100'}
});

  2. 获取参数

    this.props.location.state

注意：有坑

在history路由模式下刷新页面参数state还在，但是hash路由模式下刷新页面state参数丢失了。

search的方式传参

在地址栏中通过?传递参数

  1. 跳转传递参数
    字符串传递参数：

    <Link to={'/register?id=1'}>search跳转到注册页面</Link>

    this.props.history.push('/register?id=1');

    对象传递参数：

    <Link to={{pathname: '/register', search: '?id=10'}}>search跳转到注册页面</Link>

    this.props.history.push({
  pathname: '/register',
  search: '?id=100'
});

  2. 获取参数

    this.props.location.search

    search参数获取到时一个字符串

search参数转换成对象

1）自己封装函数进行转换

export function parseSearch(str) {
    let arr = str.split("?")[1].split("&");   //先通过？分解得到？后面的所需字符串，再将其通过&分解开存放在数组里
    let obj = {};
    for (let i of arr) {
        console.log(i.split("="));
        obj[i.split("=")[0]] = i.split("=")[1];  //对数组每项用=分解开，=前为对象属性名，=后为属性值
    }
    return obj;
}

2）通过插件qs进行转换

  1. 安装插件

    npm i qs

  2. 引入

    import qs from 'qs'

  3. 使用
    将字符串参数转换成对象

    qs.parse(this.props.location.search, {
  ignoreQueryPrefix: true
});

    ignoreQueryPrefix：去掉前缀?

    将对象转换成字符串参数

    qs.stringify(obj, {
  addQueryPrefix: true
})

    addQueryPrefix：添加前缀?

路由跳转

通过Link组件跳转

 <Link to={'/home/teacher'}>教师管理</Link>

通过js跳转

window.location.href跳转
window.location.href = '/home/students'

这种可以在react项目中跳转路由页面，虽然可以完成页面的跳转，但是存在一些缺陷，会导致资源的重复加载，导致页面重新加载，用户体验不好。

props.push跳转路由

是路由插件提供了能力进行路由页面跳转，这种方式不会重复加载，页面也不会刷新，用户体验更好。

字符串参数：

this.props.history.push('/home/students');

对象参数：

this.props.history.push({
    pathname: '/home/students'
});
props.replace

替换路由路径，返回的是返回到了上上个页面

字符串参数：

this.props.history.replace('/home/students');

对象参数：

// 做了很多逻辑处理
this.props.history.replace({
    pathname: '/home/students'
});
props.goBack

回退到上一个页面路由

this.props.history.goBack();
props.goForward

前进一个页面

this.props.history.goForward();

withRouter高阶组件

非路由组件的跳转

在react组件中，通过Route组件配置的页面组件，被称为路由组件，但是直接引入使用的组件被称为非路由组件，非路路由组件内部没有路由相关信息，没法直接跳转路由。

针对非路由组件获取路由信息的解决方案：

1）将父组件的路由信息传入到非路由组件中（不推荐）

<Header {...this.props}></Header>

传入后，非路由组件内部就拥有了路由相关信息，然后就可以跳转路由了。

this.props.history.push('/login');

虽然解决了路由跳转问题，但是不推荐使用，因为这种方式嵌套了其他的非路由组件，会导致将路由信息层层传递下去，开发起来也非常麻烦。

2）withRouter高阶组件

通过高阶组件withRouter包裹非路由组件，将路由相关信息注入到组件的props中，非路由组件就拥有了路由相关信息。

  1. 引入

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

  2. 使用

    export default withRouter(Header);

    运行withRouter函数包裹非路由组件，注入路由信息。

  3. 跳转

    this.props.history.push('/login');

  4. 全代码

    import React, { Component } from 'react'
import { withRouter } from 'react-router-dom';
class Header extends Component {
    gotoLogin = () => {
        console.log(this.props)
        this.props.history.push('/login');
    }
  render() {
    return (
      <div>
        这是header组件
        <button onClick={this.gotoLogin}>去登录</button>
      </div>
    )
  }
}
export default withRouter(Header);

高阶组件的案例

函数科里化：https://www.jianshu.com/p/2975c25e4d71

高阶组件本质就是一个函数，接收一个组件作为参数，经过处理返回一个组件。

简单解释withRouter：

function withRouter(Comp) {
    return class WrapperdCompoennt extends React.Component {
        
        history = () => {
            
        }
        
        render() {
            return <Comp history={this.history} />
        }
    }
}

案例：

import React, { Component } from 'react'

function HOC(Comp) {
    return class WrapperedComp extends Component {

        state = {
            title: 'web前端'
        }

        render() {
            return <Comp title={this.state.title} />
        }
    }
}

class Test extends Component {
  render() {
    return (
      <div>
        test页面：
        <br />
        title: {this.props.title}
      </div>
    )
  }
}

export default HOC(Test);
巷子里有条狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文|使用缓存为Vue中的keep-alive类的react-router 。如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案...
raw-react-part-3:学习Raw React-路由
05-05
在本项目"raw-react-part-3:学习Raw React-路由"中，我们专注于React的基础知识，特别是关于路由的实现。React是JavaScript库，用于构建用户界面，尤其适用于单页应用程序。"香草路线"可能指的是在没有使用第三方库...
koa-react-router：用于koa 2的react-router中间件
02-03
npm install koa-react-router react react-dom react-router --save 注意： react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中，如下所...
react-swipeable-routes:用于将react-swipeable-views与react-router集成的实用程序
05-02
React可滑动路线 用于将与集成的实用程序。 例子 请注意，滑动时url会如何变化。 该示例在/ example上可用。 用法 import React , { Component } from "react" ; import logo from "./logo.svg" ; import "./App....
react-keeper:React的路由库
05-11
一个React的路由库，但不仅仅是路由器。 React-Router是一个很棒的产品，我们从中学到了很多。 但是我们确实面对了React-Router在实际使用中无法解决的许多问题，尤其是在移动APP中。 为了让React-Keeper适合移动...
react-router:react-router 中文文档
04-29
React Router Declarative routing for 文档 ...静态路由配置助手 About react--router的开发由React Training和许多的贡献者完成。 如果您有兴趣了解更多关于React能为您的公司做什么的事情，请联
react-native路由总结
01-20
安装 npm install @react-navigation/native npm install @react-navigation/stack ...npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-con
详解如何给React-Router添加路由页面切换时的过渡动画
12-03
在React开发中，React-Router是用于管理应用路由的重要库，而给路由页面添加过渡动画则可以提升用户体验。本文将详细介绍如何在React-Router v5（兼容v4）中使用react-transition-group库来实现页面切换时的过渡效果...
react-router
05-02
这是一个react-router搭建的实例，下载后npm install 安装下依赖模块，然后npm run server启动。此外https://blog.csdn.net/qq_40621718/article/details/79979897有详细的搭建步骤也可以留邮箱。
React Native react-navigation 导航使用详解
08-28
React Native react-navigation 导航使用详解 React Native 中的 react-navigation 库是当前最流行的导航解决方案之一，该库提供了强大的导航功能，可以满足大多数移动应用程序的需求。下面我们将详细介绍 react-...
深入理解react-router 路由的实现原理
10-17
React Router 是 React 应用程序中的关键组件，它允许开发者管理应用程序中的路由，实现视图与 URL 的同步。本文将深入探讨 React Router 的实现原理，重点关注其依赖库 `history`，以及如何使用 `history` 来构建一...
使用React-Router实现前端路由鉴权的示例代码
11-20
React-Router 是React生态系统中的关键组件，用于在前端管理单页应用（SPA）的路由。在传统的Web应用中，路由通常由服务器控制，但随着SPA的流行，前端开始负责处理路由，以提供更流畅的用户体验。React-Router 提供...
react-router-loader:基于react-proxy-loader，按需动态加载React-Router组件
04-17
React路由器加载器基于和 ，适用于路由处理程序。安装npm install react-router-loader --save-dev依存关系使用哪个版本取决于您的react-router版本React路由器React路由器加载器1.x 0.4.x 2.x及以上0.5.x用法在要求...
react-preactrouter的异步路由组件
08-15
在React和Preact生态系统中，路由管理是构建单页应用（SPA）不可或缺的一部分。`preact-router`是一个轻量级的路由库，它为Preact提供了类似React Router的功能。本篇将深入探讨`preact-router`中的异步路由组件，...
react-router实现按需加载
01-21
本文使用的 React-router 版本为 2.8.1 React Router自己就有一套按需加载解决方案，将代码拆分成多个小包，在浏览过程中实现按需加载； 如过你的项目搭配了webpack打包工具，那么需要在webpack.config.js的output内...
React-router4路由监听的实现
12-09
React-router 4 React Router4是一个纯React重写的包，...在react中，例如：在父路由中有两个子路由，两个子路由组件的内容都属于父路由中的一部分，通过切换子路由来显示不同内容，这种情况下，父组件中的生命周期
react_antd:react，react-router-dom @ 4.0，react-redux，antd
05-06
这是一个react + antd的后台管理系统模版框架,具有响应式动态路由（可根据后台服务器提供列表或者登录验证身份进行修改Menu菜单）。 具备列表表单的增删改查、功能齐全的tinymce@4.9富文本、响应式表单验证登录状态...
react-router-dom-demo
07-21
在React开发中，路由管理是不可或缺的一部分，而`react-router-dom`是React社区广泛使用的路由库，它使得在单页应用（SPA）中实现页面间的导航变得简单易行。本项目"react-router-dom-demo"专注于演示如何在React...
react-最好用的reactreduxreactrouterantd脚手架
08-15
3. **React-Router**: React-Router是React生态系统中的路由库，它允许你在React组件之间进行导航。通过定义路由规则，React-Router可以将URL映射到特定的组件，实现页面间的无刷新跳转。 4. **Ant Design**: Ant ...
react-native 路由拦截
最新发布
07-28
在 React Native 中，可以使用第三方库来实现路由拦截。一个常用的库是 React Navigation，它提供了强大的导航和路由管理功能。 要实现路由拦截，可以使用 React Navigation 提供的导航守卫功能。导航守卫可以在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值