Question

我有一个仪表板组件，里面只有基本布局：菜单，应用程序栏和主Cardview，将在其中显示所有组件。

在仪表板组件中，我做了如下几条路线：

<Switch>
             
              <Route path={`${match.path}/home`} exact  render={() => <Home/>} />

              <Route
                path={`${match.path}/complaints`}
                exact
                component={Complaints}
              />
              <AdminRoute
                path={`${match.path}/supervisors`}
                exact
                component={Supervisors}
                role={userData.Role}
              />
              <Route
                path={`${match.path}/reports`}
                exact
                component={GenerateReports}
              />
              <Route path={`${match.path}/profile`} exact component={Profile} />
              <Route
                path={`${match.path}/employees`}
                exact
                component={Employees}
              />
              <AdminRoute
                path={`${match.path}/manage`}
                exact
                component={ManageComplaints}
                role={userData.Role}
              />
            </Switch>

这是我的App.js，用于路由仪表板和登录页面：


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

export default App;

这是我的私人路线组件：


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：3000 / dashboard，它仅显示菜单和应用程序栏，而主cardview为空。但是，如果我转到localhost / dashboard / home，则在主cardview中也可以看到home组件。

每当用户输入此localhost：3000 / dashboard时，我希望页面重定向到localhost：3000 / dashboard / home。

这是我在专用路由器内部尝试执行的操作：

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") ?
                    <Redirect to="/dashboard/home" component={() => <Component {...props} /> } />
                    
                    :
                    <Redirect to="/"/>
            }
        />
    );
};

通过这种方式，它确实重定向到/ dashboard / home，但根本不显示任何内容。甚至没有菜单，它完全是空白。

重定向到专用路由器内的其他页面

0 个答案: