Better routing for IPFS websites when using React Router

An alternative to BrowserRouter or HashRouter in React Router that sets the basename (website root url path) dependent on how the site is being served over IPFS.

A site using the IpfsRouter can be served with working routing from all of the following:

• http://www.example.com
• http://ipfs.io/ipfs/QmPm8NcEnpjRHmJEciWUv1nV2tBgTb74zgDhkvcxWkjh21/
• http://ipfs.io/ipns/www.example.com/

Out of the box BrowserRouter will only allow one basename, forcing you to use HashRouter if you are intending to serve the site over an IPFS HTTP gateway. IpfsRouter scans the current url to establish which context it is being used in: domain root, IPFS over public gateway, IPNS over public gateway, then sets the basename accordingly.

npm install --save ipfs-react-router

React Router expects a top level Router component to provide access to the history API. IpfsRouter is a drop in replacement for BrowserRouter.

import React from 'react'
import { Route, Switch } from 'react-router-dom'
import IpfsRouter from 'ipfs-react-router'

function App() {
  return (
    <div className="App">
      <IpfsRouter>
        <Switch>
          <Route exact path="/">
            <h2>Homepage</h2>
          </Route>
          <Route path="/another">
            <h2>Another</h2>
          </Route>
          <Route path="*">
            <p>Not found</p>
          </Route>
        </Switch>
      </IpfsRouter>
    </div>
  )
}

export default App

PRs accepted.

To run the tests (jest):

yarn test

Eslint and prettier are used for linting:

yarn lint

To auto-fix linting issues:

yarn lint:fix

MIT © John Kane