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

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

私有(private)路由组件:

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

但是，当执行此操作时，我收到以下警告:

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

路线:

<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

你需要使用()来渲染Route，你需要这样改:

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

私有(private)路由组件:

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