createConnected
Wrapper for creating components using connect and target state.
Parameters
-
props
object
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.
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
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, defaultfalse
)
-
props
object -
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>
)
}