React学习笔记【11】（SPA，路由的基本使用）

学习地址：https://www.bilibili.com/video/BV1wy4y1D7JT
官方文档：

• 英文：https://react.dev/
• 中文：https://react.docschina.org/

SPA的理解

1. 单页面Web应用(single page web application,SPA)
2. 整个应用只有一个完整的页面
3. 点击页面中的链接不会刷新页面，只会做页面的局部更新

什么是路由？

1. 路由就是一个映射关系(key:value)
2. key为 路value可能是function或者component

路由分类

1. 后端路由：
   • 理解：value是function，用来处理客户端提交的请求
   • 注册路由：router.get(path,function(req,res))
   • 工作过程：当node收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据。
2. 前端路由
   • 浏览器端路由，value是component，用于展示页面内容
   • 路由注册：
   • 工作过程：当浏览器的path变为 /test 时，当前路由组件就会变成Test组件

使用react-router-dom

npm i react-router-dom
//指定版本
npm i react-router-dom@版本号

内置组件：

1. <BrowserRouter>
	-  使用的是H5的history API，不兼容IE9以下版本
	- 路径中没有#号，如：localhost:3000/deme/test
	- 刷新后对state参数没有任何影响，因为state保存在history对象中
2. <HashRouter>
	-  使用的是URL的哈希值
	- 路径中包含#号，如：localhost:3000/#/demo/test
	- 刷新后对导致state参数的丢失
	- 可以用于解决一些路径错误相关的问题
3. <Route>
	-  注册路由
4. <Redirect to="/test" />
	- 一般写在所有路由注册的最下方，当路由都无法匹配时，跳转到redirect指定的路由，可用于初次进入重定向
5. <Link>
	- 路由链接
6. <NavLink>
	- 可实现高亮效果，通过activeClassName指定选中样式名
	- 标签体内容是一个特殊的标签属性(使用this.props.children获取)  
7. <Switch>
	- 通常情况下，path和component时一一对应的关系，Switch可以提高路由匹配的效率，简单来说当匹配成功后就不会继续向下匹配

路由组件可接受到的props：

1. history对象
2. match对象
3. withRouter函数

路由的基本使用：
index.js文件

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App';
ReactDOM.render(<BrowserRouter><App></App></BrowserRouter>, document.getElementById('root'));

使用

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中，靠a标签跳转不同的页面 */}
                            {/* <a className="list-group-item" href="./about.html">About</a>
                            <a className="list-group-item active" href="./home.html">Home</a> */}


                            {/* 在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">
                                {/* 注册路由  exact:精准匹配(布尔值) */}
                                <Route path="/about" component={About} />
                                <Route exact path="/home" component={Home} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

效果展示