Skip to content
A react-router wrapper for handling incorrect routes using fuzzy search.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
LICENSE.md
README.md
package-lock.json
package.json
rollup.config.js

README.md

react-router-fuzzy

A react-router wrapper for handling incorrect routes using fuzzy search.

NPM JavaScript Style Guide

Install

npm install --save react-router-fuzzy

Usage

react-router-fuzzy provides a wrapper, withFuzzy for Switch component of react-router-dom. It also requires Route to be sent as it adds a default 404 route as a child to Switch. This component displays a list of nearest routes to the current path, if no matching route is found. You can specify your own 404 component, which then receives a nearest prop, which is an array of results as per fuzzyset.js output.

import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
import withFuzzy from 'react-router-fuzzy'

const WrappedSwitch = withFuzzy(Switch, Route)

const custom404 = props => {
  //custom component receives 'nearest' as a prop
  return <div>{props.nearest.map(n => <i>{n[1]}</i>)}</div>
}

export default class SomeComponent extends Component {
  render () {
    return (
      <WrappedSwitch notFound={custom404}>
        <Route path="/about" render={props => <div>About</div>} />
        <Route path="/docs" render={props => <div>Docs</div>} />
        <Route path="/pricing" render={props => <div>Pricing</div>} />
        <Route path="/contact" render={props => <div>Contact</div>} />
      </WrappedSwitch>
    )
  }
}

License

MIT © mohitk05

You can’t perform that action at this time.