时间戳

首页 > 解决方案 > 如果用户在 React 中登录，则重定向并显示组件

reactjs - 如果用户在 React 中登录，则重定向并显示组件

问题描述

我有一个作为公共路由的登录页面和一个作为私有路由的仪表板页面，如下所示：

应用程序.js：


function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <PublicRoute path="/" exact component={Login} />
          <PrivateRoute path="/dashboard" component={Dashboard} />
        </Switch>
      </div>
    </Router>
  );
}

这是我的私有路由组件：

let store = require("store");
const PrivateRoute = ({component: Component, ...options}) => {
    //   const finalComponent = user != null && user.auth == true ? component : Login;

    const [userData, setUserData] = useState({});

    useEffect(() => {
        setUserData(store.get("userData"));
    }, []);
    return (
        <Route
            {...options}
            render={(props) =>
                store.get("userData") ?
                    <Component {...props} />
                    :
                    <Redirect to="/"/>
            }
        />
    );
};

export default PrivateRoute;

现在我面临的问题是，如果我打开仪表板localhost:9999/dashboard，我的任何组件都不可见，因为它们是在仪表板组件内部路由的。因此，当我打开它时，localhost:9999/dashboard我想对重定向做出反应，localhost:9999/dashboard/home并在用户登录时显示组件。

我试图这样做：

return (
        <Route
            {...options}
            render={(props) =>
                store.get("userData") ?
                    <Redirect to="/dashboard/home" component={<Component {...props}} />
                    :
                    <Redirect to="/"/>
            }
        />
    );

这确实路由到主页，但根本看不到任何东西。我的意思是仪表板内的组件也根本不可见。

这就是我得到的。您会看到它重定向但不显示任何内容：

标签： reactjsroutes

解决方案

我相信您可以更具体地了解您正在显示的代码是哪个文件。

但我觉得你正在尝试完成这样的事情：

私人路由器

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({component: Component, restricted, ...rest}) => {
    return (
        <Route {...rest} render={props => (
            user.auth == true ?
                <Redirect to="/dashboard" />
            :   <Redirect to="/dashboard/home" />

        )} />
    );
};

export default PrivateRoute;

推荐阅读