React Router的替代品：亲手构建

React Router 是一个非常流行的库，它提供了很多有用的功能，比如嵌套路由、动态路由、重定向等等。但是，如果你只是想实现一些基本的功能，那么你也可以自己手动编写一个路由器。

手动编写路由器的好处是，你可以完全控制路由器的行为。你可以根据自己的需要，定制路由器的功能和行为。另外，手动编写路由器也可以帮助你更好地理解路由的工作原理。

要手动编写一个 React 路由器，你需要做以下几件事：

1. 创建一个 Router 组件。这个组件将负责管理路由。
2. 在 Router 组件中，你需要定义一个 state 对象，用于存储当前的路由。
3. 在 Router 组件中，你需要定义一个 render 方法，该方法将根据当前的路由，渲染相应的组件。
4. 在 Router 组件中，你需要定义一个 handleUrlChange 方法，该方法将在 URL 发生变化时被调用。
5. 在 handleUrlChange 方法中，你需要根据新的 URL，更新 state 对象中的当前路由。

以下是一个简单的手动编写 React 路由器的示例：

import React, { useState } from "react";

const Router = () => {
  const [currentRoute, setCurrentRoute] = useState("/");

  const handleUrlChange = () => {
    const newUrl = window.location.pathname;
    setCurrentRoute(newUrl);
  };

  useEffect(() => {
    window.addEventListener("popstate", handleUrlChange);

    return () => {
      window.removeEventListener("popstate", handleUrlChange);
    };
  }, []);

  return (
    <div>
      {currentRoute === "/" && <Home />}
      {currentRoute === "/about" && <About />}
      {currentRoute === "/contact" && <Contact />}
    </div>
  );
};

export default Router;

这个路由器非常简单，它只支持静态路由。如果你想实现更复杂的功能，比如嵌套路由、动态路由、重定向等等，你需要对这个路由器进行更多的修改。

手动编写 React 路由器是一个很有挑战性的任务，但是它也是一个很有趣的任务。如果你有兴趣学习路由的工作原理，那么我鼓励你尝试自己动手编写一个路由器。