Link and Redirect to routes safely in your react applications 🌄
Switch branches/tags
Nothing to show
Clone or download
Latest commit bd1e9b0 Oct 27, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Docs Oct 26, 2018
src Initial Commit Oct 24, 2018
.babelrc init create-react-library@2.6.6 Oct 24, 2018
.editorconfig init create-react-library@2.6.6 Oct 24, 2018
.eslintrc.js Initial Commit Oct 24, 2018
.gitignore Initial Commit Oct 24, 2018
.nvmrc Initial Commit Oct 24, 2018
.travis.yml init create-react-library@2.6.6 Oct 24, 2018
README.md Readme Oct 24, 2018
package.json Prepublish Oct 26, 2018
rollup.config.js Initial Commit Oct 24, 2018

README.md


Passage helps when linking or redirecting to routes that may or may not be in your react app.

The idea is simple: Wrap Passage around your routes so it knows what routes have been defined in your app. Then, using the Link and Redirect components from Passage will honor the HTML5 history API if the route is within your app, otherwise falling back to other means such as anchor tags or location redirects.

Note: There may be some issues with nested react routes. Read more here.

Installing

Install via NPM:

npm i @dollarshaveclub/react-passage@latest --save

Usage

Passage provides three exports.

  • A Passage component used for identifying routes in your app
  • A Link component, use this to safely render react links internal/external routes
  • A Redirect component, use this to safely redirect to internal/external routes

Wrap the Passage component around your routes

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

import { Passage } from '@dollarshaveclub/react-passage'

const App = () => (
  <Passage>
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </Switch>
    </BrowserRouter>
  </Passage>
)

The Passage component accepts an optional prop called targets. This is an array of components that you want to search for within your routes file. It has a value of [Route] by default.

const App = () => (
  <Passage targets={[ Route, MyCustomRoute ]}>
    <BrowserRouter>
      <Switch>
        <MyCustomRoute exact path="/" component={Home} />
        <MyCustomRoute path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </Switch>
    </BrowserRouter>
  </Passage>
)

Leverage Passage Links and Redirects

import React from 'react'

import {
  Link,
  Redirect,
} from '@dollarshaveclub/react-passage'

// Renders a React Router Link tag if it can, otherwise falls back to an anchor tag
const aboutExample = () => (<Link to='/about'>About</Link>)

// Redirects with react-history if route exists, otherwise, uses window.location.assign
const externalExample = () => (<Redirect to='/external-path' />)

// Change how you redirect
const changeRedirectExample = () => (
  <Redirect to='/new-website' via={(to) => window.location.href = to} />
)

License

MIT