细读 React | React Router 路由切换原理

                  2022 北京冬奥会开幕式          此前不绝在迷惑，显着 pushState()、replaceState() 不触发 popstate 事故，可为什么 React Router 还能挂载对应路由的组件呢？
   翻了一下 history.js 源码，终于知道缘故起因了。
   源码

   假设项目路由计划如下：
  

1. import { render } from 'react-dom'
2. import { BrowserRouter, Routes, Route } from 'react-router-dom'
3. import { Mine, About } from './routes'
4. import App from './App'
6. const rootElement = document.getElementById('root')
8. render(
9.   <BrowserRouter>
10.     <Routes>
11.       <Route path="/" exact element={<App />} />
12.       <Route path="/mine" element={<Mine />} />
13.       <Route path="/about" element={<About />} />
14.     </Routes>
15.   </BrowserRouter>,
16.   rootElement
17. )

复制代码

  然后我们看下 <BrowserRouter /> 的源码（react-router-dom/modules/BrowserRouter.js），以下省略了一部门无关代码：
  

1. import React from 'react'
2. import { Router } from 'react-router'
3. import { createBrowserHistory as createHistory } from 'history'
5. /**
6. * The public API for a <Router> that uses HTML5 history.
7. */
8. class BrowserRouter extends React.Component {
9.   // 构建 history 对象
10.   history = createHistory(this.props)
12.   render() {
13.     // 将 history 对象等传入 <Router /> 组件
14.     return <Router history={this.history} children={this.props.children} />
15.   }
16. }
18. // ...
20. export default BrowserRouter

复制代码

  接着我们继续看下 <Router /> 组件的源码（react-router/modules/Router.js），如下：
  

1. import React from 'react'
2. import HistoryContext from './HistoryContext.js'
3. import RouterContext from './RouterContext.js'
5. /**
6. * The public API for putting history on context.
7. */
8. class Router extends React.Component {
9.   static computeRootMatch(pathname) {
10.     return { path: '/', url: '/', params: {}, isExact: pathname === '/' }
11.   }
13.   constructor(props) {
14.     super(props)
16.     this.state = {
17.       location: props.history.location
18.     }
19.    
20.     // 关键点：
21.     // 当触发 popstate 事件、
22.     // 或主动调用 props.history.push()、props.history.replace() 方法时，
23.     // 都会执行 history 对象的 listen 方法，使得执行 setState 强制更新当前组件
24.     this.unlisten = props.history.listen(location => {
25.       this.setState({ location })
26.     })
27.   }
29.   componentWillUnmount() {
30.     // 组件卸载时，解除监听
31.     if

复制代码