没有 React Router 的 ReactJS 中的简单路由器

Question

我听说 ReactRouter 很烂。

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

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

我如何更改它以使用我发现的类似这样的东西 here:

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

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

Answer 1

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

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 />;
    }
  }
}

没有 React Router 的 ReactJS 中的简单路由器

Simple router in ReactJS without ReactRouter

javascript

router

reactjs