Question

我想使用React Route config实现受保护的路由。

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)

Answer 2

据我了解，您现在可以在配置中添加render方法

{
    {
        path: "/restricted-area",
        render: (props) => isUserLoggedIn() ? <RestrictedArea/> : <Redirect to="/login"/>
    },
    {
        path: "/login",
        component: Login
    }
}

https://github.com/ReactTraining/react-router/pull/6217

Answer 3

如果有人需要这种行为，我推荐这个protected-react-routes-generator

它将为您处理所有逻辑，您只需要提供结构即可。

如何使用React Route Config实现保护路由

3 个答案: