https://github.com/kanej/ipfs-react-router

Better React Router routing for IPFS deployed websites
https://github.com/kanej/ipfs-react-router

ipfs react react-router

Last synced: 24 days ago
JSON representation

Better React Router routing for IPFS deployed websites

• Host: GitHub
• URL: https://github.com/kanej/ipfs-react-router
• Owner: kanej
• Created: 2020-01-27T11:44:40.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T05:49:13.000Z (almost 2 years ago)
• Last Synced: 2024-10-07T16:55:59.387Z (about 1 month ago)
• Topics: ipfs, react, react-router
• Language: TypeScript
• Size: 1.18 MB
• Stars: 9
• Watchers: 2
• Forks: 2
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# IPFS React Router

![npm](https://img.shields.io/npm/v/ipfs-react-router?style=for-the-badge)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/kanej/ipfs-react-router/build?logo=github&style=for-the-badge)

> Better routing for IPFS websites when using React Router

An alternative to `BrowserRouter` or `HashRouter` in [React Router](https://reacttraining.com/react-router/web/guides/quick-start) that sets the basename (website root url path) dependent on how the site is being served over [IPFS](https://ipfs.io).

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.

## Install

```bash

npm install --save ipfs-react-router

```

## Usage

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

```javascript

import React from 'react'

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

import IpfsRouter from 'ipfs-react-router'

function App() {

  return (

    


      

        

          

            
Homepage

          

          

            
Another

          

          

            
Not found

          

        

      

    

  )

}


export default App

```

## Contributing

PRs accepted.

To run the tests (jest):

```bash

yarn test

```

Eslint and prettier are used for linting:

```bash

yarn lint

```

To auto-fix linting issues:

```bash

yarn lint:fix

```

## License

MIT © John Kane