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