从0到1：自制React-Router，打造个性化单页应用路由

2023-12-06 19:15:23

探索React-Router：从零开始构建自己的路由组件

在现代Web开发中，单页应用（SPA）已成为主流，而React-Router作为备受欢迎的前端路由库，以其灵活性和强大的功能，深受前端开发者的喜爱。本文将手把手带你从零开始实现一个React-Router，从基本原理到实际应用，一步步深入探索路由组件的工作方式。你不仅将构建出自己的React-Router，还能在理解原理的基础上，开发出更灵活、更符合自身项目需求的路由解决方案。

React-Router的组件构成

React-Router主要包含四个核心组件：

<BrowserRouter>：用于包装整个应用，定义路由上下文的组件。
<Route>：用于定义路由规则的组件，当URL匹配定义的路径时，它将渲染相应的组件。
<Switch>：用于匹配多个<Route>组件，当有多个<Route>匹配时，它只渲染第一个匹配的组件。
<Link>：用于创建内部链接的组件，当点击时，它将更新URL并触发相应的路由切换。

路由组件的原理

路由组件的工作原理看似复杂，但分解开来其实很简单。它通过以下几个关键步骤实现：

<BrowserRouter>组件会在应用启动时创建一个新的路由上下文对象，并将它传递给子组件。
<Route>组件会将定义的路径与当前的URL进行匹配，当匹配时，它会渲染相应的组件。
<Switch>组件会匹配多个<Route>组件，当有多个<Route>匹配时，它只渲染第一个匹配的组件。
<Link>组件会创建内部链接，当点击时，它将更新URL并触发相应的路由切换。

动手实现React-Router

定义路由上下文的BrowserRouter组件

class BrowserRouter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      location: {
        pathname: window.location.pathname,
        search: window.location.search,
        hash: window.location.hash,
        key: Math.random().toString(36).substr(2, 8),
      },
    };

    this.history = {
      push: (to, state) => {
        window.history.pushState(state, null, to);
        this.setState({
          location: {
            ...this.state.location,
            pathname: window.location.pathname,
            search: window.location.search,
            hash: window.location.hash,
            key: Math.random().toString(36).substr(2, 8),
          },
        });
      },
      replace: (to, state) => {
        window.history.replaceState(state, null, to);
        this.setState({
          location: {
            ...this.state.location,
            pathname: window.location.pathname,
            search: window.location.search,
            hash: window.location.hash,
            key: Math.random().toString(36).substr(2, 8),
          },
        });
      },
      go: (n) => {
        window.history.go(n);
        this.setState({
          location: {
            ...this.state.location,
            pathname: window.location.pathname,
            search: window.location.search,
            hash: window.location.hash,
            key: Math.random().toString(36).substr(2, 8),
          },
        });
      },
    };
  }

  render() {
    return (
      <RouterContext.Provider value={{
        history: this.history,
        location: this.state.location,
      }}>
        {this.props.children}
      </RouterContext.Provider>
    );
  }
}

实现匹配路由的Route组件

class Route extends Component {
  constructor(props) {
    super(props);

    this.state = {
      match: this.computeMatch(props.path, props.exact, props.strict, this.props.location.pathname),
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      match: this.computeMatch(nextProps.path, nextProps.exact, nextProps.strict, nextProps.location.pathname),
    });
  }

  computeMatch(path, exact, strict, pathname) {
    const match = {
      path,
      url: pathname,
      isExact: exact,
      params: {},
    };

    const parts = path.split('/');
    const locationParts = pathname.split('/');

    if (parts.length !== locationParts.length) {
      return null;
    }

    for (let i = 0; i < parts.length; i++) {
      const part = parts[i];
      const locationPart = locationParts[i];

      if (part === '*') {
        match.params['*'] = locationPart;
      } else if (part.startsWith(':')) {
        const name = part.substring(1);
        match.params[name] = locationPart;
      } else if (part !== locationPart) {
        return null;
      }
    }

    return match;
  }

  render() {
    const { match } = this.state;
    const { children } = this.props;

    return match ? children(match) : null;
  }
}

添加选择路由的Switch组件

class Switch extends Component {
  render() {
    const { children } = this.props;
    const location = this.props.location;

    let match = null;

    React.Children.forEach(children, (child) => {
      if (match || !React.isValidElement(child)) {
        return;
      }

      const match = child.props.computedMatch ? child.props.computedMatch : child.props.match;

      if (match) {
        return;
      }

      match = this.computeMatch(child.props.path, child.props.exact, child.props.strict, location.pathname);
    });

    return match ? match.isExact ? children[match.index] : null : null;
  }

  computeMatch(path, exact, strict, pathname) {
    const match = {
      path,
      url: pathname,
      isExact: exact,
      params: {},
    };

    const parts = path.split('/');
    const locationParts = pathname.split('/');

    if (parts.length !== locationParts.length) {
      return null;
    }

    for (let i = 0; i < parts.length; i++) {
      const part = parts[i];
      const locationPart = locationParts[i];

      if (part === '*') {
        match.params['*'] = locationPart;
      } else if (part.startsWith(':')) {
        const name = part.substring(1);
        match.params[name] = locationPart;
      } else if (part !== locationPart) {
        return null;
      }
    }

    return match;
  }
}

创建内部链接的Link组件

class Link extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();
    this.props.history.push(this.props.to);
  }

  render() {
    const { to, children } = this.props;

    return (
      <a href={to} onClick={this.handleClick}>
        {children}
      </a>
    );
  }
}

常见问题解答

什么是React-Router？
React-Router是一个流行的前端路由库，用于在单页应用中管理路由。
React-Router有哪些核心组件？
React-Router主要包含<BrowserRouter>、<Route>、<Switch>和<Link>四个核心组件。
如何使用React-Router？
你可以在项目中安装React-Router，并使用<BrowserRouter>包装整个应用，使用<Route>定义路由规则，使用<Switch>匹配多个路由，并使用<Link>创建内部链接。
React-Router的优势有哪些？
React-Router具有灵活性、强大的功能和良好的社区支持。
我可以使用React-Router做什么？
你可以使用React-Router在单页应用中构建复杂的路由功能，实现页面跳转、参数传递和URL更新等功能。