Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
@dollarshaveclub/react-passage
Advanced tools
Link and Redirect to routes safely in your react applications
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.
Install via NPM:
npm i @dollarshaveclub/react-passage@latest --save
Passage provides three exports.
Passage
component used for identifying routes in your appLink
component, use this to render react links internal/external routesRedirect
component, use this to redirect to internal/external routesPassage
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} />
)
MIT
FAQs
Link and Redirect to routes safely in your react applications
We found that @dollarshaveclub/react-passage demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 23 open source maintainers collaborating on the project.
Did you know?
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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.