https://github.com/alexseitsinger/react-nested-routes
Allows routes that are nested and routes for modals.
https://github.com/alexseitsinger/react-nested-routes
modal react react-router route
Last synced: about 2 months ago
JSON representation
Allows routes that are nested and routes for modals.
- Host: GitHub
- URL: https://github.com/alexseitsinger/react-nested-routes
- Owner: alexseitsinger
- License: bsd-2-clause
- Created: 2019-04-16T23:37:31.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T19:50:47.000Z (over 3 years ago)
- Last Synced: 2025-05-18T18:51:03.888Z (about 1 year ago)
- Topics: modal, react, react-router, route
- Language: JavaScript
- Homepage: https://www.alexseitsinger.com/packages/node/react-nested-routes
- Size: 1.91 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
### Table of Contents
- [createRouteComponent][1]
- [Parameters][2]
- [Examples][3]
## createRouteComponent
Creates a stateless functional component for use in the root route. Routes that are marked with `modal: true` are rendered WITH their parent route component.
### Parameters
- `config` **[Object][4]** An object of route configurations.
- `config.Switch`
- `config.Route`
- `config.config`
### Examples
```javascript
import React from "react"
import { Router, Route, Switch } from "react-router"
import { createRouteComponent } from "@alexseitsinger/react-nested-routes"
import LandingPage from "./pages/landing"
import AboutPage from "./pages/about"
import AboutModalPage from "./pages/about-modal"
import NotFoundPage from "./pages/not-found"
const config = {
path: "/",
Component: LandingPage,
routes: [
{path: "*", Component: NotFoundPage},
{path: "about", Component: AboutPage, routes: [
{path: "modal", Component: AboutModalPage, modal: true},
]}
]
}
function App(props) {
const RouteComponent = createRouteComponent({ Switch, Route, config })
return (
)
}
export default App
```
Returns **[Function][5]** A stateless functional component to be used in the root route.
[1]: #createroutecomponent
[2]: #parameters
[3]: #examples
[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function