Question

我有一个名为AuthenticatedRoute.tsx的文件，该文件在我的Router.tsx文件中用作我所有受保护/已认证路由的模板。

export default ({ component: C, authUser: A, path: P, exact: E }:
    { component, authUser, path, exact }) => (
        <Route
            exact={E}
            path={P}
            render={props =>
                getRender(A, P, props, C)
            }
        />
    );

getRender函数运行以下命令：

const getRender = (user, path, props, C) => {
    if (user) {
        if (!user.country) {
            return <Redirect to={'/select-country'} />;
        } else if (!user.phoneNumber) {
            return <Redirect to={'/add-phone'} />;
        } else if (!user.phoneNumberVerified) {
            return <Redirect to={'/verify-phone'} />;
        } else if (path === '/select-country' || path === '/add-phone' || path === '/verify-phone') {
            return <Redirect to={'/dashboard'} />;
        } else {
            return <C {...props} authUser={user} />;
        }
    } else {
        return <Redirect to={'/signin'} />;
    }
};

以上所有尝试做的事情是，如果用户的个人资料不完整，则将用户重定向到其他路由。

如果用户没有国家/地区，请将其重定向到所选国家/地区页面。
如果用户没有电话号码，请将其重定向到“添加电话号码”页面。
如果未验证用户的电话号码，请将其重定向到“验证电话号码”页面。
如果用户在上述任何一条路线上，并且已经有该数据，请重定向到仪表板。
最后，如果不满足任何规则，只需渲染他们试图获取的组件/路由。

此处出现的问题是，如果用户尝试去选择的国家或添加电话号码路由，则会出现控制台错误：

Warning: You tried to redirect to the same route you're currently on: "/select-country"

我尝试添加更多逻辑，如下所示：

if (!user.country && path !== '/select-country') {
    return <Redirect to={'/select-country'} />;
}

尽管我发生了无限重定向：

Error: Maximum update depth exceeded.

当用户未完全填写其个人资料时，如何解决重定向到这些路由的问题？

Answer 1

路径检查不起作用的原因似乎是重定向到仪表板。用户被重定向到选择国家/地区，然后针对该国家/地区的支票没有退货，并继续转到仪表板的支票，这将导致对国家/地区的检查，进而导致选择国家/地区，等等。

我们可以这样重写：

const getRender = (user, path, props, C) => {
    const currentPage = <C {...props} authUser={user} />;

    if(!user) {
        return path === '/select-country' ? currentPage : <Redirect to={'/signin'} />;
    }

    if (!user.country) {
        return path === '/select-country' ? currentPage : <Redirect to={'/select-country'} />;
    }

    if (!user.phoneNumber) {
        return path === '/add-phone' ? currentPage : <Redirect to={'/add-phone'} />;
    }

    if (!user.phoneNumberVerified) {
        return path === '/verify-phone' ? currentPage : <Redirect to={'/verify-phone'} />;
    }

    if (path === '/select-country' || path === '/add-phone' || path === '/verify-phone') {
        return <Redirect to={'/dashboard'} />;
    }

    return currentPage;
};

如何在React中创建重定向规则而不重定向到同一路由？

1 个答案: