Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
redux-first-router-link
Advanced tools
Readme
UPDATE (July 1st 2017): We now have a
NavLink
package like react-router to show active styles for your links.
yarn add redux-first-router-link
import Link from 'redux-first-router-link'
// as a standard href path string:
<Link to='/list/db-graphql'>DB & GRAPHQL</Link>
// as an array of path segments:
<Link to={['list', 'react-redux']}>REACT & REDUX</Link>
// as an action object (RECOMMENDED APPROACH SO YOU CAN CHANGE ALL URLs FROM YOUR ROUTESMAP):
<Link to={{ type: 'LIST', payload: { category: 'fp' } }}>FP</Link>
In all 3 cases, a simple link will be rendered, eg:
<a to='/list/fp'>FP</a>
NavLink:
import { NavLink } from 'redux-first-router-link'
<NavLink
to={{ type: 'LIST', payload: { category: 'redux-first-router' } }}
activeClassName='active'
activeStyle={{ color: 'purple' }}
exact={true}
strict={true}
isActive={(match, location) => location.payload.category === 'redux-first-router'}
>
Redux First Router
</NavLink>
NOTE: both
<Link />
and<NavLink />
share the React Router API for easy use for those coming from there. Our components are a subset of React Router's Link component props API as there are several additional props. See below.
Creating your links using an action
object is obviously the best solution, as it will allow you to change
static path segments in the routesMap
you pass to connectRoutes()
at any time, without
having to change any of your <Link />
components. That means you only have to change URLs in one place. AKA, your routesMap
is your "single source of truth."
For example, if you have:
import { createStore, compose, applyMiddleware, combineReducers } from 'redux'
import createBrowserHistory from 'history/createBrowserHistory'
import connectRoutes from 'redux-first-router'
const history = createBrowserHistory()
const { enhancer, middleware, reducer } = connectRoutes(history, {
LIST: '/list/:category'
})
const rootReducer = combineReducers({ location: reducer })
const store = createStore(rootReducer, compose(enhancer, applyMiddleware(middleware)))
Then you can change the static segment of the path at any time, eg:
const { middleware, enhancer, reducer } = connectRoutes(history, {
LIST: '/browse/:category'
})
But its entirely up to you. If it's easier to start to thinking in terms of paths, go for it! If that's the case, we recommend the array syntax, since its easier to pass variables, eg:
const category = 'react-redux'
const to = ['list', category]
<Link to={to}>REACT & REDUX</Link>
vs
const category = 'react-redux'
const to = `/list/${category}` // can get long & yucky with lots of variables
<Link to={to}>REACT & REDUX</Link>
true
supplied, will trigger linking/dispatching onMouseDown
instead of onMouseUp
.false
will not dispatch (useful for SEO when action handled in a parent or child element in a fancy way)'_blank'
to open up URL in a new tab (same as standard target
attribute to <a>
tags)<a>
tag takes, such as className
and style
.true
supplied, will dispatching your action as a redirect, resulting in the current page in the browser history being replaced rather than pushed. That means if the user presses the browser BACK button, he/she won't be able to go back to the previous page that had the link--he/she will go to the page before that. alias: replaceonClick
handler to do anything you want (e.g. play a sound), but if you return false
or call event.preventDefault()
it will prevent
linking/dispatching just as you may be used to. TIP: use either instead of shouldDispatch
when you want to dynamically determine
whether to trigger the action or not!NavLink
-only Propsto
path matchto
path matchtrue
supplied, active class/styles will not be applied in this example: URL is /foo/bar
and link to
is /foo
. Whereas by default they would match.to
path or URL, they both must have the slash to match. If there is no slash, they must both have no slash.true
if active. The match
argument is identical to React Router and not very useful. The location
is state.location
.'true'
when active. It's for screen-readers. Learn more here.In previous versions the to
prop was named href
and the onClick
prop was name onPress
. Those still work, but they are identical to their new names. They will be removed eventually.
redirect
has replace
as an alias for easy migration from React Router, but the terminology in our system is redirect
. You won't here the word replace
much, even though that's what happens to the browser history. The reason is because server-side redirects is central to the problem solved as well, not just client-side history replacement. In general, it's a more descriptive term for how the system responds to it.
We use commitizen, so run npm run cm
to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags, changelogs and publishing to NPM will automatically be handled based on these commits thanks to semantic-release. Be good.
Reviewing a package's tests are a great way to get familiar with it. It's direct insight into the capabilities of the given package (if the tests are thorough). What's even better is a screenshot of the tests neatly organized and grouped (you know the whole "a picture says a thousand words" thing).
Below is a screenshot of this module's tests running in Wallaby ("An Integrated Continuous Testing Tool for JavaScript") which everyone in the React community should be using. It's fantastic and has taken my entire workflow to the next level. It re-runs your tests on every change along with comprehensive logging, bi-directional linking to your IDE, in-line code coverage indicators, and even snapshot comparisons + updates for Jest! I requestsed that feature by the way :). It's basically a substitute for live-coding that inspires you to test along your journey.
FAQs
a simple but effective <Link /> component for redux-first-router (better for SEO rather than dispatching yourself)
The npm package redux-first-router-link receives a total of 11,498 weekly downloads. As such, redux-first-router-link popularity was classified as popular.
We found that redux-first-router-link demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 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.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.