react-router-nested

This library adds nesting to react-router and provides createNav - Nav higher order component wrapper.

NestedRouter

It renders Route component and keeps its all props and renders Router component inside for newly created scope (the route's address).

Props

NestedRouter props are the same as Route component props

Example

import NestedRouter from 'react-router-nested';
import { StaticRouter, Route, Switch, Redirect } from 'react-router-dom';

const App = () => 
    <Switch>
        <NestedRouter path="/settings">
            <Switch>
                <Route path="/general" component={General}/>
                <Route path="/user" component={User}/>
                <Route path="/other" component={Other}/>
                <Redirect to="/general" />
            </Switch>
        </NestedRouter>
        <Route path="/" component={Main}/>
    </Switch>
);

There is also fully working example in example/index.js

Run with webpack dev server at 8080 with: yarn start or npm start

createNav

createNav - Nav higher order component wrapper creating a navigation link from any component.

API

const NavComponent = createNav(NavOptions)(Component);

NavOptions

NavOptions is an optional parameter - it is an object with following keys, all keys are optional.

| Option | Type | Default | Description | |-----------------|:-----------------------:|:---------:|------------------------------------------------------------------------------------| | props | NavPropsOptions | - | Look at table below. | | passedProps | NavPassedPropsOptions | - | Look at table below, | | activeClassName | string or false | false | Class name appended to Component when current url matches prop to¹. | | exact | boolean | false | Use exact match for matching to with current url. | | global | boolean | false | Use global path for matching to with current url. For use with NestedRouter. | | replace | boolean | false | Use use replace instead of push method when changing an url. |

NavPropsOptions

It is an object with following keys, all keys are optional. Props override NavOptions

| Option | Type | Default | Description | |-----------------|:-------------------------------------:|:---------:|--------------------------------------------------------------------------------------------------------------------------------------------------------------| | to | string or (...handlerArgs) => url | false | Property added to Component to provide target url, or function converting handler's arguments (usually it is triggered event) to url to navigate. | | activeClassName | string or false | false | Property added to Component to override NavOptions className appended to Component's when current url matches prop to¹. | | exact | boolean | false | Property added to Component to override NavOptions setting weather to use exact match for matching to with current url. | | global | boolean | false | Property added to Component to override NavOptions setting weather to use global path for matching to with current url. For use with NestedRouter. | | replace | boolean | false | Property added to Component to override NavOptions setting weather to use use replace instead of push method when changing an url. |

NavPassedPropsOptions

These options configure names of properties passed to Component. Property is not passed when set to false. It is an object with following keys, all keys are optional.

| Option | Type | Default | Description | |-------------|:-------------------:|:-----------:|------------------------------------------------------------------------------------------------------------------| | isActive | string or false | false | Name of prop passed to Component providing boolean information about weather current path is active¹. | | currentPath | string or false | false | Name of prop passed to Component providing sting current url. | | handler | string | "onClick" | Name of prop passed to Component with event handler, to trigger url change |

¹Available only when props.to is a prop name (string). It doesn't work when it is configured to resolve url form prop.handler argument.

Example

import { createNav } from 'react-router-nested';
import { StaticRouter } from 'react-router-dom';

const NavBase = (props) => <button {...props} />;
const Nav = createNav({ // default options
    props: {
        activeClassName: false,
        to: 'to',
        global: false,
        replace: false,
        exact: false
    },
    passedProps: {
        handler: 'onClick',
        isActive: false,
        currentPath: false
    },
    activeClassName: false,
    exact: false,
    global: false,
    replace: false
})(NavBase);

const App = () => (
    <StaticRouter context={{}} location='/asd'>
        <Nav to="/zxc" />
    </StaticRouter>
);