Simple router in ReactJS without ReactRouter

Question

I've read that ReactRouter sucks.

How can I render different components strictly based on particular routes, i.e, with:

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

How could I change this to use something like this that I found here:

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

I feel like this should NOT be that complicated.

klugjo · Accepted Answer · 2017-12-04 02:22:40Z

1

Here is what I have done for a simple app I have:

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

edited Dec 4, 2017 at 2:22

answered Dec 4, 2017 at 2:12

klugjo

21k10 gold badges65 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikolas Over a year ago

It doesn't work for subpaths like a/b (not found). Is there a workaround as long as I don't want to use React Router?

Collectives™ on Stack Overflow

Simple router in ReactJS without ReactRouter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related