Как реализовать Защищенный маршрут с помощью React Route Config

Question

Я хочу реализовать Защищенные маршруты, используя конфигурацию React Route.

Answer 1

Вот пример того, как сделать приватный маршрут, здесь я использую состояние redux для моей логики аутентификации, вы можете использовать для этого свою собственную логику.

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

const PrivateRoute = ({ component: Component, isAuth, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuth ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: '/',
            state: { from: props.location }
          }}
        />
      )
    }
  />
)

const mapStateToProps = ({ isAuth }) => ({
  isAuth
})

export default connect(mapStateToProps)(PrivateRoute)