UPDATE (July 1st 2017): We now have a
NavLinkpackage like react-router to show active styles for your links.
yarn add 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:
<NavLinkto= type: 'LIST' payload: category: 'redux-first-router'activeClassName='active'activeStyle= color: 'purple'exact=truestrict=trueisActive= locationpayloadcategory === 'redux-first-router'>Redux First Router</NavLink>
<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:
const history =const enhancer middleware reducer =const rootReducer =const store =
Then you can change the static segment of the path at any time, eg:
const middleware enhancer reducer =
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>
const category = 'react-redux'const to = `/list/` // can get long & yucky with lots of variables<Link to=to>REACT & REDUX</Link>
- down: boolean = false - if
truesupplied, will trigger linking/dispatching
- shouldDispatch: boolean = true - if
falsewill not dispatch (useful for SEO when action handled in a parent or child element in a fancy way)
- target: string - eg:
'_blank'to open up URL in a new tab (same as standard
- ...props: - you can pass any additional props that an
<a>tag takes, such as
Familiar React Router Props:
- redirect: boolean = false - if
truesupplied, 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: replace
- onClick: (SyntheticEvent) => ?boolean - you can provide an
onClickhandler to do anything you want (e.g. play a sound), but if you return
event.preventDefault()it will prevent linking/dispatching just as you may be used to. TIP: use either instead of
shouldDispatchwhen you want to dynamically determine whether to trigger the action or not!
- activeClassName: string - the class applied when the URL and
- activeStyle: object - the style object applied when the URL and
- exact: boolean = false - if
truesupplied, active class/styles will not be applied in this example: URL is
/foo. Whereas by default they would match.
- strict: boolean = false - if there is a trailing slash in the
topath or URL, they both must have the slash to match. If there is no slash, they must both have no slash.
- isActive: (match, location) => boolean - a custom function to determine whether the link is active. Return
trueif active. The
matchargument is identical to React Router and not very useful. The
- ariaCurrent: string - defaults to
'true'when active. It's for screen-readers. Learn more here.
In previous versions the
toprop was named
onClickprop was name
onPress. Those still work, but they are identical to their new names. They will be removed eventually.
replaceas an alias for easy migration from React Router, but the terminology in our system is
redirect. You won't here the word
replacemuch, 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).