import React from 'react';import {  BrowserRouter as Router,  Switch,  Route,} from "react-router-dom";import Home from './pages/Home';import Login from './pages/Login';import Backend from './pages/Backend';import Admin from './pages/Admin';

function App() {  return (                                                      );}
export default App;

import React from 'react';import { Link } from 'react-router-dom';
function Login() {  return (    <>      
登錄頁(yè)      回首頁(yè)      );}
export default Login;

import React from "react";import { Router } from "react-router";import { createBrowserHistory as createHistory } from "history";
class BrowserRouter extends React.Component {  history = createHistory(this.props);
  render() {    return ;  }}

"workspaces": {    "packages": [      "packages/*"    ]  }

import React from "react";import { Router } from "react-router";import { createBrowserHistory as createHistory } from "history";
class BrowserRouter extends React.Component {  history = createHistory(this.props);
  render() {    return ;  }}
export default BrowserRouter;

import React from "react";
import HistoryContext from "./HistoryContext.js";import RouterContext from "./RouterContext.js";
/** * The public API for putting history on context. */class Router extends React.Component {  // 靜態(tài)方法，檢測(cè)當(dāng)前路由是否匹配  static computeRootMatch(pathname) {    return { path: "/", url: "/", params: {}, isExact: pathname === "/" };  }
  constructor(props) {    super(props);
    this.state = {      location: props.history.location     // 將history的location掛載到state上    };
    // 下面兩個(gè)變量是防御性代碼，防止根組件還沒(méi)渲染location就變了    // 如果location變化時(shí)，當(dāng)前根組件還沒(méi)渲染出來(lái)，就先記下他，等當(dāng)前組件mount了再設(shè)置到state上    this._isMounted = false;    this._pendingLocation = null;
    // 通過(guò)history監(jiān)聽路由變化，變化的時(shí)候，改變state上的location    this.unlisten = props.history.listen(location => {      if (this._isMounted) {        this.setState({ location });      } else {        this._pendingLocation = location;      }    });  }
  componentDidMount() {    this._isMounted = true;
    if (this._pendingLocation) {      this.setState({ location: this._pendingLocation });    }  }
  componentWillUnmount() {    if (this.unlisten) {      this.unlisten();      this._isMounted = false;      this._pendingLocation = null;    }  }
  render() {    // render的內(nèi)容很簡(jiǎn)單，就是兩個(gè)context    // 一個(gè)是路由的相關(guān)屬性，包括history和location等    // 一個(gè)只包含history信息，同時(shí)將子組件通過(guò)children渲染出來(lái)    return (              value={{          history: this.props.history,          location: this.state.location,          match: Router.computeRootMatch(this.state.location.pathname),        }}      >                  children={this.props.children || null}          value={this.props.history}        />          );  }}
export default Router;

// 創(chuàng)建和管理listeners的方法function createEvents() {  let handlers = [];
  return {    push(fn) {      handlers.push(fn);      return function () {        handlers = handlers.filter(handler => handler !== fn);      };    },    call(arg) {      handlers.forEach(fn => fn && fn(arg));    }  }}
function createBrowserHistory() {  const listeners = createEvents();  let location = {    pathname: '/',  };
  // 路由變化時(shí)的回調(diào)  const handlePop = function () {    const currentLocation = {      pathname: window.location.pathname    }    listeners.call(currentLocation);     // 路由變化時(shí)執(zhí)行回調(diào)  }
  // 監(jiān)聽popstate事件  // 注意pushState和replaceState并不會(huì)觸發(fā)popstate  // 但是瀏覽器的前進(jìn)后退會(huì)觸發(fā)popstate  // 我們這里監(jiān)聽這個(gè)事件是為了處理瀏覽器的前進(jìn)后退  window.addEventListener('popstate', handlePop);
  // 返回的history上有個(gè)listen方法  const history = {    listen(listener) {      return listeners.push(listener);    },    location  }
  return history;}
export default createBrowserHistory;

import pathToRegexp from "path-to-regexp";
const cache = {};const cacheLimit = 10000;let cacheCount = 0;
function compilePath(path, options) {  const cacheKey = `${options.end}${options.strict}${options.sensitive}`;  const pathCache = cache[cacheKey] || (cache[cacheKey] = {});
  if (pathCache[path]) return pathCache[path];
  const keys = [];  const regexp = pathToRegexp(path, keys, options);  const result = { regexp, keys };
  if (cacheCount < cacheLimit) {    pathCache[path] = result;    cacheCount++;  }
  return result;}
/** * Public API for matching a URL pathname to a path. */function matchPath(pathname, options = {}) {  if (typeof options === "string" || Array.isArray(options)) {    options = { path: options };  }
  const { path, exact = false, strict = false, sensitive = false } = options;
  const paths = [].concat(path);
  return paths.reduce((matched, path) => {    if (!path && path !== "") return null;    if (matched) return matched;
    const { regexp, keys } = compilePath(path, {      end: exact,      strict,      sensitive    });    const match = regexp.exec(pathname);
    if (!match) return null;
    const [url, ...values] = match;    const isExact = pathname === url;
    if (exact && !isExact) return null;
    return {      path, // the path used to match      url: path === "/" && url === "" ? "/" : url, // the matched portion of the URL      isExact, // whether or not we matched exactly      params: keys.reduce((memo, key, index) => {        memo[key.name] = values[index];        return memo;      }, {})    };  }, null);}
export default matchPath;

import React from "react";
import RouterContext from "./RouterContext.js";import matchPath from "./matchPath.js";
/** * The public API for matching a single path and rendering. */class Route extends React.Component {  render() {    return (              {context => {          // 從RouterContext獲取location          const location = context.location;          const match = matchPath(location.pathname, this.props);  // 調(diào)用matchPath檢測(cè)當(dāng)前路由是否匹配
          const props = { ...context, location, match };
          let { component } = this.props;
          // render對(duì)應(yīng)的component之前先用最新的參數(shù)match更新下RouterContext          // 這樣下層嵌套的Route可以拿到對(duì)的值          return (                          {props.match                ? React.createElement(component, props)                : null}                      );        }}          );  }}
export default Route;

import React from "react";
import RouterContext from "./RouterContext.js";import matchPath from "./matchPath.js";
class Switch extends React.Component {  render() {    return (              {context => {          const location = context.location;     // 從RouterContext獲取location
          let element, match;     // 兩個(gè)變量記錄第一次匹配上的子元素和match屬性
          // 使用React.Children.forEach來(lái)遍歷子元素，而不能使用React.Children.toArray().find()          // 因?yàn)閠oArray會(huì)給每個(gè)子元素添加一個(gè)key，這會(huì)導(dǎo)致兩個(gè)有同樣component，但是不同URL的重復(fù)渲染          React.Children.forEach(this.props.children, child => {            // 先檢測(cè)下match是否已經(jīng)匹配到了            // 如果已經(jīng)匹配過(guò)了，直接跳過(guò)            if (!match && React.isValidElement(child)) {              element = child;
              const path = child.props.path;
              match = matchPath(location.pathname, { ...child.props, path });            }          });
          // 最終組件的返回值只是匹配子元素的一個(gè)拷貝，其他子元素被忽略了          // match屬性會(huì)被塞給拷貝元素的computedMatch          // 如果一個(gè)都沒(méi)匹配上，返回null          return match            ? React.cloneElement(element, { location, computedMatch: match })               : null;        }}          );  }}
export default Switch;

// ... 省略其他代碼 ...const match = this.props.computedMatch              ? this.props.computedMatch              : matchPath(location.pathname, this.props);  // 調(diào)用matchPath檢測(cè)當(dāng)前路由是否匹配

// ... 省略其他代碼 ...push(url) {  const history = window.history;  // 這里pushState并不會(huì)觸發(fā)popstate  // 但是我們?nèi)匀灰@樣做，是為了保持state棧的一致性  history.pushState(null, '', url);
  // 由于push并不觸發(fā)popstate，我們需要手動(dòng)調(diào)用回調(diào)函數(shù)  location = { pathname: url };  listeners.call(location);}

import React from "react";import RouterContext from "../react-router/RouterContext";
// LinkAnchor只是渲染了一個(gè)沒(méi)有默認(rèn)行為的a標(biāo)簽// 跳轉(zhuǎn)行為由傳進(jìn)來(lái)的navigate實(shí)現(xiàn)function LinkAnchor({navigate, ...rest}) {  let props = {    ...rest,    onClick: event => {      event.preventDefault();      navigate();    }  }
  return ;}
function Link({  component = LinkAnchor,  // component默認(rèn)是LinkAnchor  to,  ...rest}) {  return (          {context => {        const { history } = context;     // 從RouterContext獲取history對(duì)象
        const props = {          ...rest,          href: to,          navigate() {            history.push(to);          }        };
        return React.createElement(component, props);      }}      );}
export default Link;