@alexseitsinger/react-nested-routes

Table of Contents

• createRouteComponent
  • Parameters
  • Examples

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 An object of route configurations.
  • config.Switch
  • config.Route
  • config.config

Examples

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 (
    <Router>
      <Layout>
        <Route component={RouteComponent} />
      </Layout>
    </Router>
  )
}

export default App

Returns Function A stateless functional component to be used in the root route.