react-router

Tue, 17 Dec 2024 00:00:00 +0800

写在前面：为什么要学习react-router底层源码? 为什么要弄明白整个路由流程？

学习react-router，有助于我们学习单页面应用(spa)路由跳转原理，让我们理解从history.push，到组件页面切换的全套流程，使我们在面试的时候不再为路由相关的问题发怵，废话不说，让我们开启深入react-router源码之旅吧。

一正确理解react-router

1 理解单页面应用

什么是单页面应用？

个人理解，单页面应用是使用一个html下，一次性加载js, css等资源，所有页面都在一个容器页面下，页面切换实质是组件的切换。

2 react-router初探，揭露路由原理面纱

①`react-router-dom`和`react-router`和`history`库三者什么关系

**history** 可以理解为react-router的核心，也是整个路由原理的核心，里面集成了popState,history.pushState等底层路由实现的原理方法，接下来我们会一一解释。

**react-router**可以理解为是**react-router-dom**的核心，里面封装了Router，Route，Switch等核心组件,实现了从路由的改变到组件的更新的核心功能,在我们的项目中只要一次性引入react-router-dom就可以了。

**react-router-dom**,在react-router的核心基础上，添加了用于跳转的Link组件，和histoy模式下的BrowserRouter和hash模式下的HashRouter组件等。所谓**BrowserRouter和HashRouter，也只不过用了history库中createBrowserHistory和createHashHistory方法**

react-router-dom 我们不多说了，这里我们重点看一下react-router。

②来个小demo尝尝鲜?

import { BrowserRouter as Router, Switch, Route, Redirect,Link } from 'react-router-dom'

import Detail from '../src/page/detail'
import List from '../src/page/list'
import Index from '../src/page/home/index'

const menusList = [
 {
 name: '首页',
 path: '/index'
 },
 {
 name: '列表',
 path: '/list'
 },
 {
 name: '详情',
 path: '/detail'
 },
]
const index = () => {
 return <div >
 <div >

 <Router >
 <div>{
 /* link 路由跳转 */
 menusList.map(router=><Link key={router.path} to={ router.path } >
 <span className="routerLink" >{router.name}</span>
 </Link>)
 }</div>
 <Switch>
 <Route path={'/index'} component={Index} ></Route>
 <Route path={'/list'} component={List} ></Route>
 <Route path={'/detail'} component={Detail} ></Route>
 {/* 路由不匹配，重定向到/index */}
 <Redirect from='/*' to='/index' />
 </Switch>
 </Router>
 </div>
 </div>
}

效果如下

React-Router on Last Stand