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

我有一个名为

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)
            }
        />
    );

如果用户的配置文件不完整，以上所做的只是将用户重定向到不同的路由

如果用户没有国家，请将其重定向到“选择国家”页面

如果用户没有电话号码，请将其重定向到添加电话号码页面

如果未验证用户的电话号码，请将其重定向到验证电话号码页面

如果用户在上述任何路由上并且已经拥有该数据，请重定向到仪表板

最后，如果没有满足任何规则，只需渲染他们试图获取的组件/路由即可

此处出现的问题是，如果用户试图转到所选国家/地区或添加电话号码路由，则会出现控制台错误：

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

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

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'} />;
    }
};

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

---

当用户未完全填写其配置文件时，如何解决重定向到这些路由的问题？

路径检查不起作用的原因似乎是重定向到仪表板。用户被重定向到SelectCountry，然后对其进行的检查没有返回，并继续进行到dashboard的检查，这将导致检查国家，这将导致选择国家，等等

我们可以这样重写：

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;
};

const getRender=（用户、路径、道具、C）=>{
const currentPage=；
如果（！用户）{
返回路径=='/选择国家/地区'？当前页面：；
}
如果（！user.country）{
返回路径=='/选择国家/地区'？当前页面：；
}
如果（！user.phoneNumber）{
返回路径=='/添加电话'？当前页面：；
}
如果（！user.phonenumberified）{
返回路径=='/验证电话'？当前页面：；
}
如果（路径=='/选择国家/地区'| |路径=='/添加电话'| |路径=='/验证电话'）{
返回；
}
返回当前页面；
};

是

路径

实际上是当前路径，如果是，它看起来像是您正在比较的字符串吗？@MatthewHerbst-是的，

路径

是当前路径。我可以将其记录在

getRender

函数的顶部进行确认。

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;
};