Javascript ReactJS中没有ReactRouter的简单路由器

我读过这篇文章，很烂

如何严格根据特定路线渲染不同的组件，即：

ReactDOM.render(<Game />, document.getElementById("root"));

ReactDOM.render（，document.getElementById（“根”）；

我怎样才能将其更改为使用我发现的类似内容：

const路由=[
{路径：'/'，操作：（）=>}，
{路径：'/game'，操作：（）=>}，
{路径：'/game2'，操作：（）=>}
];

---

我觉得这应该没那么复杂。

以下是我为一个简单的应用程序所做的：

class SimpleRouter extends React.Component {
  render() {
    {this.getContainer()}
  }

  getContainer() {
    const url = window.location.href;

    const routes = [
      { path: '/', action: () => <HomePage /> },
      { path: '/game', action: () => <Game /> },
      { path: '/game2', action: () => <Game2 /> }
    ];

    const route = routes.find(r => url.endsWith(r));

    if (route && route.action) {
      return route.action();
    } else {
      return <DefaultContainer />;
    }
  }
}

类SimpleRouter扩展了React.Component{
render（）{
{this.getContainer（）}
}
getContainer（）{
const url=window.location.href；
常数路由=[
{路径：'/'，操作：（）=>}，
{路径：'/game'，操作：（）=>}，
{路径：'/game2'，操作：（）=>}
];
constroute=routes.find（r=>url.endsWith（r））；
if（路由和路由操作）{
返回路径。action（）；
}否则{
返回；
}
}
}

它不适用于子路径，如

a/b

（未找到）。只要我不想使用React路由器，是否有解决办法？

class SimpleRouter extends React.Component {
  render() {
    {this.getContainer()}
  }

  getContainer() {
    const url = window.location.href;

    const routes = [
      { path: '/', action: () => <HomePage /> },
      { path: '/game', action: () => <Game /> },
      { path: '/game2', action: () => <Game2 /> }
    ];

    const route = routes.find(r => url.endsWith(r));

    if (route && route.action) {
      return route.action();
    } else {
      return <DefaultContainer />;
    }
  }
}