Question

我当前正在使用以下代码检查用户是否通过身份验证以允许他们进入特定页面，如果没有通过身份验证，则将其重定向到登录页面。

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
const AuthRoute = ({ component: Component, authenticated, ...rest }) => (
    <Route
        {...rest}
        render={
            (props) => authenticated === "false" ? <Redirect to='/login' /> : <Component {...props} />
        }
    />
)

export default AuthRoute

上面的实现可以正常工作。但是，我想知道是否可以保留旧的url，即重定向到/login之前的URL –假设未登录的用户尝试访问受保护的/posts，并且重定向到/login页。

我想要做的是在成功认证之后将用户重定向到/login，/posts之前的页面

这样的实现可行吗？

Answer 1

Redirect组件to道具可以接收string或object，因此您的身份验证路由如下所示：

const AuthRoute = ({ component: Component, authenticated, ...rest }) => (
    <Route
        {...rest}
        render={
            (props) => authenticated === "false" ? <Redirect to={{ pathname: '/login' state: { from: props.location }}} /> : <Component {...props} />
        }
    />
)

然后在登录组件中，您可以通过以下方式访问该状态：

const { from } = this.props.location.state;

Here是Redirect的文档。

在路由重定向之前反应保存旧URL

1 个答案: