Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@dollarshaveclub/react-passage

Package Overview
Dependencies
Maintainers
23
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dollarshaveclub/react-passage

Link and Redirect to routes safely in your react applications

  • 2.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
23
Created
Source

npm version

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 render react links internal/external routes
  • A Redirect component, use this to 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>
)


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>)

// Force Link to render an anchor tag
const externalExample = () => (<Link external to='https://www.google.com'>Google</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

FAQs

Package last updated on 15 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc