手写实现React Router

React Router是一个用于在React应用程序中进行路由管理的流行库。它提供了一种简单而强大的方式来处理URL的导航和渲染特定的组件。在本文中，我们将从零开始手写一个简化版的React Router，以帮助你更好地理解其工作原理。

首先，我们需要创建一个名为Router的组件，它将负责监听URL的变化，并根据不同的路径渲染相应的组件。

import React from 'react';

class Router extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPath: window.location.pathname
    };
  }

  componentDidMount() {
    window.addEventListener('popstate', this.handlePopState);
  }

  componentWillUnmount() {
    window.removeEventListener('popstate', this.handlePopState);
  }

  handlePopState = () => {
    this.setState({ currentPath: window.location.pathname });
  };

  render() {
    const { routes } = this.props;
    const { currentPath } = this.state;