@alexseitsinger/toggled-route
v0.1.1
Published
A react route that uses a different component based on the authentication status of the user.
Downloads
5
Readme
Toggled Route
Description
A react route that uses a different component based on the authentication status of the user.
Props
- path - (String, Required) - The string to match for the route.
- authenticatedComponent - (Node, Required) - The component to use for the route when the user is authenticated.
- anonymousComponent - (Node, Required) - The component to use for the route when the user is not authenticated.
- isAuthenticated - (Boolean, Required) - True or false if the user is authenticated.
Usage
import React from "react"
import { Switch } from "react-router-dom"
import { connect } from "react-redux"
import ToggledRoute from "@alexseitsinger/toggled-route"
import HomePage from "../pages/home"
import LandingPage from "../pages/landing"
const ConnectedToggledRoute = connect((state) => {
return {
isAuthenticated: state.auth.isAuthenticated
}
})(ToggledRoute)
export default (
<Switch>
<ConnectedToggledRoute
path={"/"}
exact
authenticatedComponent={HomePage}
anonymousComponent={LandingPage}
/>
</Switch>
)