https://github.com/dollarshaveclub/react-passage

Link and Redirect to routes safely in your react applications 🌄
https://github.com/dollarshaveclub/react-passage

context-api javascript react react-router

Last synced: 3 months ago
JSON representation

Link and Redirect to routes safely in your react applications 🌄

• Host: GitHub
• URL: https://github.com/dollarshaveclub/react-passage
• Owner: dollarshaveclub
• License: mit
• Created: 2018-10-24T15:05:44.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:37:58.000Z (about 2 years ago)
• Last Synced: 2024-08-09T01:39:55.829Z (6 months ago)
• Topics: context-api, javascript, react, react-router
• Language: JavaScript
• Homepage: https://dollarshaveclub.github.io/react-passage/
• Size: 1.87 MB
• Stars: 58
• Watchers: 11
• Forks: 5
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


***

[![npm version](https://badge.fury.io/js/%40dollarshaveclub%2Freact-passage.svg)](https://badge.fury.io/js/%40dollarshaveclub%2Freact-passage)

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](https://github.com/dollarshaveclub/react-passage/issues/1)_.

## Installing

Install via NPM:

```sh

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

```js

import React from 'react'

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

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

const App = () => (

  

    

      

        

        

        

      

    

  

)

```

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.

```js

const App = () => (

  

    

      

        

        

        

      

    

  

)

```

### Leverage Passage Links and Redirects

```js

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 = () => (About)

// Force Link to render an anchor tag

const externalExample = () => (Google)

// Redirects with react-history if route exists, otherwise, uses window.location.assign

const externalExample = () => ()

// Change how you redirect

const changeRedirectExample = () => (

   window.location.href = to} />

)

```

# License

MIT