导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

SPA的理解

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

路由的理解

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

前端路由原理

  1. 直接使用 H5 推出的 history 身上的 API
  2. hash 值（锚点） → 兼容性极佳

react-router-dom

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

react-router-dom相关API

内置组件

  1. <BrowserRouter>
  2. <HashRouter>
  3. <Route>
  4. <Redirect>
  5. <Link>
  6. <NavLink>
  7. <Switch>

其它

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

基本使用 Link && Route

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

准备工作

# 下载 react-router-dom
npm install --save react-router-dom

代码

index.js

//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//
import {BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'

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

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中，靠<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">
								{/* 注册路由 */}
								<Route path="/about" component={About}/>
								<Route path="/home" component={Home}/>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}

路由组件 VS 一般组件

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

NavLink 导航链接

NavLink 可以实现路由链接的高亮，通过 activeClassName 指定样式名

{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
<NavLink activeClassName="lance" className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName="lance" className="list-group-item" to="/home">Home</NavLink>

Switch

  1. 通常情况下，path 和 component 是一一对应的关系。
  2. Switch 可以提高路由匹配效率(单一匹配)。