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 (    <>      
登录页      回首页      );}
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 {  // 静态方法，检测当前路由是否匹配  static computeRootMatch(pathname) {    return { path: "/", url: "/", params: {}, isExact: pathname === "/" };  }
  constructor(props) {    super(props);
    this.state = {      location: props.history.location     // 将history的location挂载到state上    };
    // 下面两个变量是防御性代码，防止根组件还没渲染location就变了    // 如果location变化时，当前根组件还没渲染出来，就先记下他，等当前组件mount了再设置到state上    this._isMounted = false;    this._pendingLocation = null;
    // 通过history监听路由变化，变化的时候，改变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的内容很简单，就是两个context    // 一个是路由的相关属性，包括history和location等    // 一个只包含history信息，同时将子组件通过children渲染出来    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;

// 创建和管理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: '/',  };
  // 路由变化时的回调  const handlePop = function () {    const currentLocation = {      pathname: window.location.pathname    }    listeners.call(currentLocation);     // 路由变化时执行回调  }
  // 监听popstate事件  // 注意pushState和replaceState并不会触发popstate  // 但是浏览器的前进后退会触发popstate  // 我们这里监听这个事件是为了处理浏览器的前进后退  window.addEventListener('popstate', handlePop);
  // 返回的history上有个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);  // 调用matchPath检测当前路由是否匹配
          const props = { ...context, location, match };
          let { component } = this.props;
          // render对应的component之前先用最新的参数match更新下RouterContext          // 这样下层嵌套的Route可以拿到对的值          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;     // 两个变量记录第一次匹配上的子元素和match属性
          // 使用React.Children.forEach来遍历子元素，而不能使用React.Children.toArray().find()          // 因为toArray会给每个子元素添加一个key，这会导致两个有同样component，但是不同URL的重复渲染          React.Children.forEach(this.props.children, child => {            // 先检测下match是否已经匹配到了            // 如果已经匹配过了，直接跳过            if (!match && React.isValidElement(child)) {              element = child;
              const path = child.props.path;
              match = matchPath(location.pathname, { ...child.props, path });            }          });
          // 最终组件的返回值只是匹配子元素的一个拷贝，其他子元素被忽略了          // match属性会被塞给拷贝元素的computedMatch          // 如果一个都没匹配上，返回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);  // 调用matchPath检测当前路由是否匹配

// ... 省略其他代码 ...push(url) {  const history = window.history;  // 这里pushState并不会触发popstate  // 但是我们仍然要这样做，是为了保持state栈的一致性  history.pushState(null, '', url);
  // 由于push并不触发popstate，我们需要手动调用回调函数  location = { pathname: url };  listeners.call(location);}

import React from "react";import RouterContext from "../react-router/RouterContext";
// LinkAnchor只是渲染了一个没有默认行为的a标签// 跳转行为由传进来的navigate实现function LinkAnchor({navigate, ...rest}) {  let props = {    ...rest,    onClick: event => {      event.preventDefault();      navigate();    }  }
  return ;}
function Link({  component = LinkAnchor,  // component默认是LinkAnchor  to,  ...rest}) {  return (          {context => {        const { history } = context;     // 从RouterContext获取history对象
        const props = {          ...rest,          href: to,          navigate() {            history.push(to);          }        };
        return React.createElement(component, props);      }}      );}
export default Link;