Nonchalantly Performs Magic

    @rentpath/react-redux-router

    3.6.1 • Public • Published

    react-redux-router

    A universal router for applications using redux and react.

    Usage

    import { render } from 'react-dom'
    import Home from './Home'
    import NotFound from './NotFound'
    import { Router } from 'react-redux-router'
     
    const routes = [
      { path: '/', component: Home },
      { path: '*', component: NotFound }
    ]
     
    const App = () => (
      <Router routes={routes} initialLocation={window.location} />
    )
     
    render(App, document.body)

    API

    push(location, [status])

    Appends a new location to history.

    • [location] (String|Object): The new location.
    • [status] (Number): The status code for the new location.

    replace(location, [status])

    Replaces the current location.

    • [location] (String|Object): The new location.
    • [status] (Number): The status code for the new location.

    go(index)

    Moves location backwards or forwards in history.

    • [index] (Number): The relative number of locations.

    goBack()

    Moves location backwards.

    goForward()

    Moves location forward.

    <Router routes initialLocation>

    • [routes] (Array): The new location.
    • [initialLocation] (Object): The initial location to use.

    <Link to replace>

    Renders a link that updates the current location when clicked.

    • [to] (String|Object): The location to use for the href attribute.
    • [replace] (Bool): Whether to use dispatch a replace action when clicked.

    rendering

    By using the <Router />, react will update your component tree post transition. In some cases, such as displaying a modal on a url change it can be desirable to skip the re-rendering of said route for slight performance boost.

    consider the following route

    {
      path'/somePath'
      resolve: () => modalParam ? { dangerouslySkipRender: true } : { componentPage}
    }

    under the hood, this prop sets the component up to automatically reject updates on transition to something like /somePath?displayModal=true.

    while useful in some cases, it is considered a bad pattern to block updates to components in such way. according to the react team:

    shouldComponentUpdate - This method only exists as a performance optimization. Do not rely on it to “prevent” a rendering, as this can lead to bugs. Consider using the built-in PureComponent instead of writing shouldComponentUpdate() by hand. PureComponent performs a shallow comparison of props and state, and reduces the chance that you’ll skip a necessary update.

    we should avoid blocking updates to a component directly. you should avoid using this props when you can and focus on creating lighter connected components that do not update so agressively instead.

    Keywords

    none

    Install

    npm i @rentpath/react-redux-router

    DownloadsWeekly Downloads

    180

    Version

    3.6.1

    License

    MIT

    Unpacked Size

    69.4 kB

    Total Files

    33

    Last publish

    Collaborators

    • cubbyjs
    • vlucas
    • kaborso
    • helveticascenario
    • orionstein
    • rentpath-admin
    • lfender6445
    • tadjohnston
    • ninomichaels
    • plifshiz
    • kevinolson
    • mneumark83
    • patmfitz
    • verydanny