1、路由本质

路由本质就是对 url 进行改变和监听，来让某个 dom 节点显示对应的视图。

2、hash 与 history

2.1 hash模式

hash 的改变：我们可以通过 location 暴露出来的属性，直接去修改当前 URL 的 hash 值：

  1. window.location.hash = 'index';
  3. // 路径就会变为 xx网址/#index

hash 的感知：通过监听 “hashchange”事件，可以用 JS 来捕捉 hash 值的变化，进而决定我们页面内容是否需要更新：

  1. // 监听hash变化，点击浏览器的前进后退会触发
  2. window.addEventListener('hashchange', function(event){ 
  3.     // 根据 hash 的变化更新内容
  4. },false)

2.2 history 模式

使用history.pushState 和 history.replaceState：

  1. history.pushState(data[,title][,url]); // 向浏览历史中追加一条记录
  3. // history.pushState({}, '', 'index')
  4. // 路径就会变为 xx网址/index
  1. history.replaceState(data[,title][,url]); // 修改（替换）当前页在浏览历史中的信息

在 history 模式下，我们可以通过监听 popstate 事件来达到我们的目的：

  1. window.addEventListener('popstate', function(e) {
  2.   console.log(e)
  3. });

3、实现react-router

3.1 使用结构

  1. import { Router, Route, useHistory } from './Router';
  3. const Foo = () => <div>foo</div>;
  4. const Bar = () => <div>bar</div>;
  6. const Links = () => {
  7.   const history = useHistory();
  9.   const go = (path: string) => {
  10.     // 触发存储的监听函数
  11.     const state = { name: path };
  12.     history.push(path, state);
  13.   };
  15.   return (
  16.     <div className="demo">
  17.       <button onClick={() => go('/foo')}>foo</button>
  18.       <button onClick={() => go('/bar')}>bar</button>
  19.     </div>
  20.   );
  21. };
  23. export default () => {
  24.   return (
  25.     <div>
  26.       <Router>
  27.         <Links />
  28.         <Route path="/foo">
  29.           <Foo />
  30.         </Route>
  31.         <Route path="/bar">
  32.           <Bar />
  33.         </Route>
  34.       </Router>
  35.     </div>
  36.   );
  37. };

3.2 Router

Router 的核心原理就是通过 Provider 把 location 和 history 等路由关键信息传递给子组件，并且在路由发生变化的时候要让子组件可以感知到：

  1. import React, { useState, useEffect, ReactNode } from 'react';
  2. import { history, Location } from './history';
  3. interface RouterContextProps {
  4.   history: typeof history;
  5.   location: Location;
  6. }
  8. export const RouterContext = React.createContext<RouterContextProps | null>(
  9.   null,
  10. );
  12. export const Router: React.FC = ({ children }) => {
  13.   const [location, setLocation] = useState(history.location);
  14.   useEffect(() => {
  15.     // 监听
  16.     const unlisten = history.listen(location => {
  17.       setLocation(location);
  18.     });
  19.     return unlisten;
  20.   }, []);
  22.   return (
  23.     <RouterContext.Provider value={{ history, location }}>
  24.       {children}
  25.     </RouterContext.Provider>
  26.   );
  27. };
  • 我们在组件初始化的时候利用 history.listen 监听了路由的变化，一旦路由发生改变，就会调用 setLocation 去更新 location 并且通过 Provider 传递给子组件。
  • 并且这一步也会触发 Provider 的 value 值的变化，通知所有用 useContext 订阅了 history 和 location 的子组件去重新 render。

3.3 Route

Route 组件接受 path 和 children 两个 prop，本质上就决定了在某个路径下需要渲染什么组件，我们又可以通过 Router 的 Provider 传递下来的 location 信息拿到当前路径，所以这个组件需要做的就是判断当前的路径是否匹配，渲染对应组件。

  1. import { useLocation } from "./hooks";
  3. interface RouteProps {
  4.   path: string;
  5.   children: JSX.Element;
  6. }
  8. export const Route = ({ path, children }: RouteProps) => {
  9.   const { pathname } = useLocation();
  10.   const matched = path === pathname; // 匹配路由
  12.   if (matched) {
  13.     return children;
  14.   }
  15.   return null;
  16. };

3.4 history

  1. import { readOnly, parsePath } from './utils';
  3. export interface history {
  4.   push(): void;
  5. }
  7. export type State = object | null;
  9. export type Listener = (location: Location) => void;
  11. export interface Path {
  12.   pathname: string;
  13.   search: string;
  14.   hash: string;
  15. }
  17. export interface Location<S extends State = State> extends Path {
  18.   state: S;
  19. }
  21. let location = getLocation();
  22. function getLocation(): Location {
  23.   const { pathname, search, hash } = window.location;
  24.   return readOnly({
  25.     pathname,
  26.     search,
  27.     hash,
  28.     state: null,
  29.   });
  30. }
  32. function getNextLocation(to: string, state: State = null) {
  33.   return readOnly({
  34.     ...parsePath(to),
  35.     state,
  36.   });
  37. }
  39. // 触发
  40. function push(to: string, state?: State) {
  41.   location = getNextLocation(to, state);
  42.   listeners.forEach(fn => fn(location));
  43. }
  45. // 存储 history.listen 的回调函数
  46. // 监听
  47. let listeners: Listener[] = [];
  48. function listen(fn: Listener) {
  49.   listeners.push(fn);
  50.   return function() {
  51.     listeners = listeners.filter(listener => listener !== fn);
  52.   };
  53. }
  55. // 用于处理浏览器前进后退操作
  56. window.addEventListener('popstate', () => {
  57.   location = getLocation();
  58.   listeners.forEach(fn => fn(location));
  59. });
  61. export const history = {
  62.   get location() {
  63.     return location;
  64.   },
  65.   push,
  66.   listen,
  67. };

4、源码地址

https://github.com/linhexs/mini-react-router