Conditional Route for react-router. tags: #react #react-router

README.md

Conditional Route

Check first something before rendering it.

Usage

<RouteIf
  condition={(() => {
    return true
  })()}
  privateRoute={true}
  path="/path/:value"
  component={MyComponent}
/>

PrivateRoute.js

import React  from 'react'
import {
  Route,
  Redirect
} from 'react-router-dom'

class PrivateRoute extends React.Component {
  render() {
    const { component: Component, ...rest } = this.props

    return (
      <Route {...rest}  render={(props) => {
          return true ? (
              <Component {...props} />
            ):(
              <Redirect to={{
                pathname: '/login',
                state: { from: this.props.location }
              }} />
            )
        }
      } />
    )
  }
}

export default PrivateRoute

RouteIf.js

import React from 'react'
import {
  Route,
  Redirect,
} from 'react-router-dom'

import PrivateRoute from '~/routes/Private'

const RouteIf = ({ condition, privateRoute, path, component }) => {
  return condition ? (
    privateRoute ?
      <PrivateRoute path={path} component={component} /> :
      <Route path={path} component={component} />
    ):(
    <Redirect to="/" />
  )
}

export default RouteIf