# react-router-nested > React Router addon for nesting in for declaring nested paths without knowledge of what was the parent url for current scope. Latest version **4.3.2** (published 2020-10-18) · MIT license · 0 weekly downloads ## Install ```sh npm install react-router-nested pnpm add react-router-nested yarn add react-router-nested bun add react-router-nested ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.3.2 | | Published | 2020-10-18 | | First published | 2017-12-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 46.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Adam Makświej | | Maintainers | vertexbz | | Keywords | react, router, react-router, nested, stack, layer, scope, relative, navigation, hoc, link | ## Links - npm: https://www.npmjs.com/package/react-router-nested - Repository: https://github.com/vertexbz/react-router-nested - Homepage: https://github.com/vertexbz/react-router-nested#readme - Issues: https://github.com/vertexbz/react-router-nested/issues - npm.io page: https://npm.io/package/react-router-nested ## Dependencies (7) - [history](https://npm.io/package/history.md) ^4.7.2 - [invariant](https://npm.io/package/invariant.md) ^2.2.2 - [classnames](https://npm.io/package/classnames.md) ^2.2.5 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.0 - [object.omit](https://npm.io/package/object.omit.md) ^3.0.0 - [react-display-name](https://npm.io/package/react-display-name.md) ^0.2.3 - [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2 ## Alternatives - [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads - [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads - [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads - [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads - [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads ## Recent versions - 4.3.2 (latest) — 2020-10-18 - 4.3.1 — 2020-10-18 - 4.3.0 — 2019-04-13 - 4.2.2 — 2018-01-25 - 4.2.1 — 2018-01-25 - 4.1.1 — 2018-01-06 - 4.1.0 — 2017-12-30 - 4.0.3 — 2017-12-30 - 4.0.2 — 2017-12-30 - 4.0.1 — 2017-12-29 - 4.0.0 — 2017-12-29 ## README # 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](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md) component props ### Example ```jsx import NestedRouter from 'react-router-nested'; import { StaticRouter, Route, Switch, Redirect } from 'react-router-dom'; const App = () => ); ``` --- 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 ```js import { createNav } from 'react-router-nested'; import { StaticRouter } from 'react-router-dom'; const NavBase = (props) =>