• React 全栈体系（九）

    第五章 React 路由

    一、相关理解

    1. SPA 的理解

    • 单页 Web 应用（single page web application，SPA）。
    • 整个应用只有一个完整的页面。
    • 点击页面中的链接不会刷新页面，只会做页面的局部更新。
    • 数据都需要通过 ajax 请求获取, 并在前端异步展现。

    2. 路由的理解

    2.1 什么是路由?
    • 一个路由就是一个映射关系(key:value)
    • key 为路径, value 可能是 function 或 component
    2.2 路由分类
    2.2.1 后端路由
    • 理解： value 是 function, 用来处理客户端提交的请求。
    • 注册路由： router.get(path, function(req, res))
    • 工作过程：当 node 接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
    2.2.2 前端路由
    • 浏览器端路由，value 是 component，用于展示页面内容。
    • 注册路由:
    • 工作过程：当浏览器的 path 变为/test 时, 当前路由组件就会变为 Test 组件

    3. react-router-dom 的理解

    • react 的一个插件库。
    • 专门用来实现一个 SPA 应用。
    • 基于 react 的项目基本都会用到此库。

    二、react-router-dom 相关 API

    1. 内置组件

    2. 其它

    • history 对象
    • match 对象
    • withRouter 函数

    三、基本路由使用

    1. 效果

    请添加图片描述
    请添加图片描述

    2. 准备

    2.1 下载 react-router-dom
    • npm install --save react-router-dom
    2.2 引入 bootstrap.css:
    2.3 注意
    • 由于 react-router-dom 在 2021 年 11 月份升级到了 6 版本，此处是 5 版本的代码展示，需要执行：
    npm i react-router-dom@5

    • 1
    • 最新的 6 版本使用会在后续更新

    3. 代码 - 路由的基本使用

    3.1 index.js
    /* src/index.js */
//引入react核心库
import React from "react";
//引入ReactDOM
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
//引入App组件
import App from "./App";

//渲染App到页面
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    3.2 App
    /* src/App.jsx */
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
              <h2>React Router Demo</h2>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生html中，靠跳转不同的页面 */}
              {/* 
                About
              
              
                Home
               */}
              {/* 在React中靠路由链接实现切换组件 -- 编写路由链接 */}
              <Link className="list-group-item" to="/about">
                About
              </Link>
              <Link className="list-group-item" to="/home">
                Home
              </Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    3.3 Home
    /* src/components/Home/index.jsx */
import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
        <h3>我是Home的内容</h3>
    )
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    3.4 About
    /* src/components/About/index.jsx */
import React, { Component } from 'react'

export default class index extends Component {
  render() {
    return (
      <h3>我是About的内容</h3>
    )
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    3.5 总结
    1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
	<Link to="/xxxxx">Demo</Link>
3.展示区写Route标签进行路径的匹配
	<Route path='/xxxx' component={Demo}/>
4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    4. 代码 - 路由组件与一般组件

    4.1 App
    /* src/App.jsx */
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Home from "./pages/Home";  //Home是路由组件
import About from "./pages/About";  //About是路由组件
import Header from "./components/Header"; //Header是一般组件

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <Link className="list-group-item" to="/about">
                About
              </Link>
              <Link className="list-group-item" to="/home">
                Home
              </Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    4.2 Header
    /* src/components/Header/index.jsx */
import React, { Component } from "react";

export default class index extends Component {
  render() {
    return (
      <div className="page-header">
        <h2>React Router Demo</h2>
      </div>
    );
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    4.3 About
    /* src/pages/About/index.jsx */
import React, { Component } from 'react'

export default class index extends Component {
  render() {
    console.log('About组件收到的props是', this.props);
    return (
      <h3>我是About的内容</h3>
    )
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    请添加图片描述

    4.4 总结
    1.写法不同：
	一般组件：<Demo/>
	路由组件：<Route path="/demo" component={Demo}/>
2.存放位置不同：
	一般组件：components
	路由组件：pages
3.接收到的props不同：
	一般组件：写组件标签时传递了什么，就能收到什么
	路由组件：接收到三个固定的属性
		history:
					go: ƒ go(n)
					goBack: ƒ goBack()
					goForward: ƒ goForward()
					push: ƒ push(path, state)
					replace: ƒ replace(path, state)
		location:
					pathname: "/about"
					search: ""
					state: undefined
		match:
					params: {}
					path: "/about"
					url: "/about"

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    5. 代码 - NavLink 的使用

    5.1 App
    /* src/App.jsx */
import React, { Component } from "react";
import { Route } from "react-router-dom";
import Home from "./pages/Home";  //Home是路由组件
import About from "./pages/About";  //About是路由组件
import Header from "./components/Header"; //Header是一般组件

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink activeClassName="alex" className="list-group-item" to="/about">
                About
              </NavLink>
              <NavLink activeClassName="alex" className="list-group-item" to="/home">
                Home
              </NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    5.2 index.html
    
DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>React Apptitle>
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<link rel="stylesheet" href="/css/bootstrap.css">
		<style>
			.alex{
				background-color: rgb(209, 137, 4) !important;
				color: white !important;
			}
		style>
	head>
	<body>
		<div id="root">div>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    请添加图片描述

    6. 代码 - 封装 NavLink 组件

    6.1 App
    /* src/App.jsx */
import React, { Component } from "react";
import { NavLink, Route } from "react-router-dom";
import Home from "./pages/Home";  //Home是路由组件
import About from "./pages/About";  //About是路由组件
import Header from "./components/Header"; //Header是一般组件
import MyNavLink from "./components/MyNavLink";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 在React中靠路由链接实现切换组件 -- 编写路由链接 */}
              <MyNavLink to="/about">About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    6.2 MyNavLink
    /* src/components/MyNavLink/index.jsx */
import React, { Component } from "react";
import { NavLink } from "react-router-dom";

export default class MyNavLink extends Component {
  render() {
    return (
      <NavLink activeClassName="alex" className="list-group-item" {...this.props}/>
    );
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    6.3 总结
    1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
2.标签体内容是一个特殊的标签属性
3.通过this.props.children可以获取标签体内容

    • 1
    • 2
    • 3
  • 相关阅读:
    计算机毕业设计之java+javaweb的大学生就业帮助系统-就业招聘网站
    【WCN685X】WCN6856 5G吞吐量测试只有25Mbps问题原因分析及解决方案
    手机怎样新建PDF文件？
    Springboot整合Redis
    【图多预警】Pandas绘图函数总结
    steam卡价越来越高，steam搬砖项目还能玩么？
    痞子衡嵌入式：IAR内部C-SPY调试组件配套宏文件(.mac)用法介绍
    com.alibaba.csp.sentinel.slots.block.flow.FlowException: null--记录一次报错
    如何手动添加NLTK data
    Netty 学习（六）：创建 NioEventLoopGroup 的核心源码说明
  • 原文地址：https://blog.csdn.net/sgsgkxkx/article/details/133046725