react-路由

最新推荐文章于 2024-11-10 22:15:16 发布
最新推荐文章于 2024-11-10 22:15:16 发布
阅读量186 收藏
点赞数
分类专栏： 前端 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);
巷子里有条狗
关注
专栏目录
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 源码学习01 ---- React.Children.map 的实现与应用
止于至善
11-07 535
目前是第一次看这个函数的实现，知道他大概干了什么，也大概明白每一步要干什么，但是目前还不清除他为什么要这么干。为什么要来看他的实现呢？一个是只有知道他是怎么实现的，才能知道在调用这个方法时，那些情况会报错，为什么报错，能够快速处理。使用这个方法开发功能的时候能够更加得心应手。
LangChain教程 - 创建 ReAct 风格智能代理
fenglingguitar的专栏
11-05 1148
ReAct 框架，即 Reasoning and Acting（推理和行动），是一种让模型在处理复杂任务时通过推理逐步制定行动决策的模式。推理：逐步理解任务需求，制定行动计划。行动：在每个步骤中调用所需的工具（如 API、数据库），并基于反馈继续推理。这种模式尤其适合用于构建智能助手、问答系统等复杂应用，能让模型根据上下文灵活选择下一步操作。通过 LangChain 和 ReAct 框架，我们可以构建具备推理与行动能力的智能助手，让其能够逐步分解复杂任务并动态调用工具，为用户提供更智能的服务。
使用react+copy-to-clipboard封装双击复制组件
gurenchang的博客
11-10 183
使用react+copy-to-clipboard封装双击复制组件
react动态路由
m0_64455070的博客
11-08 508
在React应用中，动态路由（Dynamic Routing）通常指的是根据应用的状态或用户的交互来动态地显示或隐藏路由（页面或组件）。
ReactPress 安装指南：从 MySQL 安装到项目启动
小牛itbull的博客
11-10 392
ReactPress 是一个基于 React 的开源发布平台，适用于搭建博客、网站或内容管理系统（CMS）。本文将详细介绍如何安装 ReactPress，包括 MySQL 数据库的安装、ReactPress 项目的配置与启动，并特别指出使用 pnpm 而不是 yarn 作为包管理工具。
4.1 WINDOWS XP,ReactOS对象与对象目录----1
zhyjhacker的博客
11-06 976
系列文章目录 文章目录系列文章目录4.1 对象与对象目录OBJECT_HEADERObpLookupEntryDirectory()NtCreateTimer() 4.1 对象与对象目录 “对象(Object)”这个词现在大家都已耳熟能详了，但是对象到底是什么呢?广义地说，对象就是“目标”，行为的目标，或者说行为的受体。所以，广义地说，任何客观存在着的物体都可以成为对象。但是，在计算机技术里,“对象”是个专有名词，其定义是:一个(或一组)数据结构和定义于其上的(若干)操作。这里所谓操作是指实现某种功能的函
React 守卫路由
晴天飛 雪的博客
11-07 444
【代码】React 守卫路由。
React的概念以及发展前景如何？
2301_81121233的博客
11-09 378
它采用组件化的方式来构建复杂的界面，通过将界面拆分成小的、独立的组件，然后将这些组件组合起来，从而使得代码更加可复用、可维护。2.VirtualDOM：React使用一个轻量级的、内存中的数据结构来代表UI，这个虚拟DOM会和真实的DOM进行对比，仅当状态改变时才会更新真实的DOM。2.生态系统：React拥有一个庞大的生态系统，包括大量的第三方库和框架，如Redux、ReactRouter等，这些都可以帮助开发者构建更复杂的应用程序。通过React Native，可以使用React开发跨平台的移动应用。
vue种ref跟reactive的区别?
renqq001的博客
11-07 689
vue种ref跟reactive的区别?
React 组件通信
记录常见的问题以及解决办法
11-07 725
// 清理订阅}, []);return (
React中常用的hook函数(四)——useRef、useNavigate、useLocation和useSearchParams
最新发布
Mrs_Lupin的博客
11-10 506
useRef的.current属性在组件的整个生命周期内都保持不变。因此，您可以将它作为持久化存储来引用外部资源、DOM 元素或者数据，而不必担心它会导致组件重新渲染。如果你将useRef用作数据存储时，不要把它当作普通的 React 状态来使用。因为如果你直接改变useRef的值（例如），这不会触发渲染更新，因此当你需要依赖于 UI 更新时，应该使用useState或者useReducer。
React核心概念与特点
m0_64455070的博客
11-08 1105
组件化：React将页面分解为独立的组件，每个组件负责自身的状态管理和视图渲染。这种组件化的开发方式使得代码逻辑更加清晰，易于复用和管理。单向数据流：React采用单向数据流，数据从父组件流向子组件。这种数据流方式有助于提升代码的可预测性和可维护性。虚拟DOM：React使用虚拟DOM来提高性能。通过比较新的DOM与旧的DOM的差异，React仅更新必要的部分，而不是重新渲染整个页面。JSX：JSX是JavaScript和XML的结合体，使得在JavaScript中书写HTML更加直观和方便。
react 组件应用
m0_51244077的博客
11-09 800
react 组件应用
React官网生成Recat项目的区别
qq_45153375的博客
11-08 846
React 框架的多样性和快速发展为不同场景提供了量身定制的解决方案。选择适合的框架可以帮助开发者集中精力在业务逻辑上，而不是重复构建基础设施。使用框架不仅可以利用其内置的优化机制，还能获得社区的支持和持续更新，这对于生产环境中的应用扩展和维护非常重要。
react-native 路由拦截
07-28
在 React Native 中，可以使用第三方库来实现路由拦截。一个常用的库是 React Navigation，它提供了强大的导航和路由管理功能。 要实现路由拦截，可以使用 React Navigation 提供的导航守卫功能。导航守卫可以在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值