EDIT 2021-12-30: this article is deprecated!

Please do not try to install libraries described here, 
since they are currently fairly outdated and 
the support libraries have changed,
rendering the examples useless for now!

Original article:

When developing JavaScript web apps, there are multiple options available for enabling client-side routing in browser-based UI software. When coding with React, you can use many available router libraries to enable routing.

But some libraries require you to wrap your application inside a certain “router provider”. That can be understood as an anti-pattern especially if you use a router library that expects you to add Router as a JSX component whereby you add a “router” tag that then wraps around application-related JSX elements. I say this can be seen as an anti-pattern when you are first supposed to use JSX for defining visual elements and then you mess this clean system by injecting programmatic non-visual elements: you end up having a sort of not-really-visual yet not-really-programmatic-either mishmash tag-monster.

Metamatic Systems Ltd provides a simplistic out-of-the-box router solution for those who don’t like provider tags.

The Metamatic Router was created primarily out of joy of doing so, but also because it was a quite easy thing to create this kind of a creature on top of the core Metamatic framework.

Installing Metamatic™ Router

There are two options to install Metamatic Router. The first option is just to install Metamatic™ framework like before:

npm i --save metamatic

You can also install just Metamatic Router as a standalone feature without state management features:

npm i --save @metamatic.net/metamatic-router

Real Demo of Router in Action

To understand how to harness Metamatic Router, the most obvious thing to do is to check out the Router Demo. There is also a hosted version of the example showing the built and deployed router demo running real time here.

Configuring Router

In addition to including Metamatic™ Router into your package.json file there is little to do when getting started with Metamatic™ Router. First, Connect your apps’s main component to Metmatic Router similarly as done in this example.

It requires you to connect the component to router with connectToRouter upon mounting:

componentDidMount = () => connectToRouter(this, () => this.setState({}));

Secondly, define which components are rendered for which URLs with matchRoute function invocations in render function:

render = () => (
  <div className="meta-lang">
    {matchRoute('/', <Header/>)}
    {matchRoute('/language', <LanguageView/>)}
    {matchRoute('/vocabulary', <VocabularyView/>)}
    {matchRoute('/exercises', <ExerciseView/>)}
  </div>
)

Redirecting and Listening for Url Changes

To see a practical example of using Metamatic to redirect to different URL paths inside your web app and reacting to URL changes, check a practical example here.

The principle is that when using the Router, you invoke redirectTo function to change your app’s URL path:

redirectTo(someUrlPath);

Similarly, if you want to make any component aware of the URL changes invoked by redirectTo function, use connectToRouter again:

componentDidMount = () => connectToRouter(this, (path) => this.setState({path}));

Deploying Your React App into Custom Folder

When it’s time to think about the production (or test environment) deployment and if you want to deploy your app into another place than your domain root https://yourdomainwhatever.com for instance https://yourdomainwhatever.com/your/custom/path you must remember to configure the outer to use that base path with configureBaseRoute function as shown in the demo app example here such as:

configureBaseRoute('/your/custom/path');

That’s all folks!