Question

我正在尝试实施重定向解决方案。如果用户已经登录并尝试访问主页（每个人都可以看到），我想重定向到仪表板（仅对登录用户可见）。

我目前的解决方案：

export const PublicRoute = ({ auth, ...props }) => {
    const isAllowed = auth.isLoggedIn();
    return isAllowed
        ? <Redirect to="/dashboard" />
        : <Route {...props} />;
};

用法：

<PublicRoute
    auth={{ isLoggedIn: () => AuthService.isLoggedIn() }}
    path="/"
    component={Main}
/>

私人路线组件：

export const ProtectedRoute =  ({ auth, ...props }) => {
    const isAllowed = auth.isLoggedIn();
    return isAllowed
        ? <Route {...props} />
        : <Redirect to="/login" />;
};

然而，当这个被推迟时，我收到以下警告：

警告：您尝试重定向到您当前所在的路线： “/仪表板”

路线：

<Provider store={store}>
    <Router history={History}>
        <Switch>
            <PublicRoute
                auth={{ isLoggedIn: () => AuthService.isLoggedIn() }}
                exact={true}
                path="/"
                component={Homepage}
            />

            <PublicRoute
                auth={{ isLoggedIn: () => AuthService.isLoggedIn() }}
                path="/login"
                component={Login}
            />

            <ProtectedRoute
                auth={{ isLoggedIn: () =>  AuthService.isLoggedIn()}}
                path="/dashboard"
                component={Dashboard}
            />
        </Switch>
    </Router>
</Provider>

当我从主页重定向到仪表板时，为什么会出现此错误？

Answer 1

你需要使用()来渲染路线，你需要改变：

export const PublicRoute = ({ auth, ...props }) => {
    const isAllowed = auth.isLoggedIn();
    return isAllowed
        ? (<Redirect to="/dashboard" />)
        : (<Route {...props} />)
};

私人路线组件：

export const ProtectedRoute =  ({ auth, ...props }) => {
    const isAllowed = auth.isLoggedIn();
    return isAllowed
        ? (<Route {...props} />)
        : (<Redirect to="/login" />)
};

如果用户使用React路由器登录重定向到仪表板？

1 个答案: