@alexseitsinger/react-router-components v4.0.0

createConnected

Wrapper for creating components using connect and target state.

Parameters

• props object
  • props.connect function The connect method to use
  • props.path string The target state to connect to.

Examples

// routes.js
import { createConnected } from "@alexseitsinger/react-router-components"

import { HomePage } from "pages/home"
import { LandingPage} from "pages/landing"
import { AboutPage } from "pages/about"

const connected = createConnected({
  connect,
  path: "authentication.isAuthenticated",
})

export const config = {
  path: "/",
  Component: connected.toggled({
    anonymous: LandingPage,
    authenticated: HomePage,
  }),
  routes: [
    {
      path: "about",
      Component: connected.redirected({
        component: AboutPage,
      }),
    },
  ]
}

Returns object A set of methods that use the connect and target state passed.

createModalSwitch

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

• options object An object of route configurations.
  • options.Switch object The Switch component to use
  • options.Route function The Route component to use for each route.
  • options.config object The routes config object to generate routes from.
  • options.report (function | boolean) The function or boolean to toggle route reports. (optional, default false)

Examples

import React from "react"
import { Router, Route, Switch } from "react-router"
import { createModalSwitch }  from "@alexseitsinger/react-router-components"

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 ModalSwitch = createModalSwitch({ Switch, Route, config })
  return (
    <Router>
      <Layout>
        <Route component={ModalSwitch} />
      </Layout>
    </Router>
  )
}

export default App

Returns function A stateless functional component to be used as the root route.

createRedirectedComponent

Returns a connected component that redirects if the state isnt truthy.

Parameters

• config object
  • config.connect function The connect function to use for connecting to redux.
  • config.path string The path to the reducer state key we want to check for truthiness.
  • config.component object The component to render if the state is truthy.
  • config.url string The pathname to redirect to if state isn't truthy. (optional, default "/")

Examples

import React from "react"
import { Provider, connect } from "react-redux"
import { Router, Route } from "react-router"
import { createRedirectedComponent } from "@alexseitsinger/react-router-components"

import SettingsPage from "pages/settings"
import LandingPage from "pages/landing"

const RedirectedSettingsPage = createRedirectedComponent({
  connect,
  component: SettingsPage,
  path: "authentication.isAuthenticated",
  url: "/",
})

function App(props) {
  return (
    <Provider store={store}>
      <Router>
        <Route path={"/"} component={LandingPage} exact />
        <Route path={"/settings"} component={RedirectedSettingsPage} exact />
      </Router>
    </Provider>
  )
}

export default App

Returns function A connected component that has some state mapped.

createToggledComponent

Returns a connected component that renders another component based on the state.

Parameters

• config object
  • config.connect function The connect function to use for connecting to redux.
  • config.path string The path to the reducer state key we want to check for truthiness.
  • config.components object
    • config.components.authenticated function The component to render when the state is truthy.
    • config.components.anonymous function The component to render when the state is not truthy.
  • config.components.anonymous
  • config.components.authenticated

Examples

import React from "react"
import { Provider, connect } from "react-redux"
import { Router, Route } from "react-router"
import { createToggledComponent } from "@alexseitsinger/react-router-components"

import HomePage from "./pages/home"
import LandingPage from "./pages/landing"

const ToggledIndex = createToggledComponent({
  connect,
  path: "authentication.isAuthenticated",
  components: {
     authenticated: HomePage,
     anonymous: LandingPage,
  },
})

function App(props) {
  return (
    <Provider store={store}>
      <Router>
        <Route path={"/"} component={ToggledIndex} exact />
      </Router>
    </Provider>
  )
}

export default App

Returns function A connected component that has some state mapped for toggling.

ModalSwitch

A route that can be used for other routes.

Parameters

• $0 Object
  • $0.Switch
  • $0.Route
  • $0.config
  • $0.report (optional, default false)
• props object
  • props.Switch function The Switch component to use.
  • props.Route function The Route component to use.
• config object The config to generate routes from.
• report (function | bool) The function or boolean to enable reporting of route paths.

Examples

// routes.js
import { IndexPage } from "pages/index"
import { AboutPage } from "pages/about"

export const config = {
  path: "/",
  Component: IndexPage,
  routes: [
    {path: "about", Component: AboutPage},
  ]
}

// app.js
import React from "react"
import { Router, Route, Switch } from "react-router"
import { ModalSwitch } from "@alexseitsinger/react-router-components"

import { config } from "./routes"

function App() {
 return (
   <Router>
     <ModalSwitch
       Switch={Switch}
       Route={Route}
       config={config}
       report={true}
     />
   </Router>
 )
}