条件路由不呈现重定向的布局

Question

在 AppRouter 中，我有一个带重定向的条件路由 <AdminLayout/>。

相关片段：

<Route
          exact
          path="/admin"
          strict
          render={(props) => <AdminLayout {...props} />}
        >
          {loggedIn ? <Redirect to="/admin/summary" /> : <Login />}
        </Route>

如果 loggedIn 为真，则重定向至 /admin/summary 否则将其重定向回 <Login/>

问题是：它只改变 URL 但不渲染 <AdminLayout/>。

不确定我哪里出错了，我错过了什么。

更新了下面的 PrivateRoute 和 AppRouter

AppRouter

import React, { useEffect } from "react";
import { Router, Route, Switch, Redirect } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { createBrowserHistory } from "history";

import { alertActions } from "../actions";
import { history } from "../helpers";

import AdminLayout from "layouts/Admin/Admin.js";
import AuthLayout from "layouts/Auth/Auth.js";
import ResetPassword from "../components/pages/reset-password/ResetPassword";
import MailReset from "../components/pages/reset-password/MailReset";
import PrivateRoute from "../routes/PrivateRoute";
import Dashboard from "views/Dashboard";

const hist = createBrowserHistory();

const AppRouter = () => {
  const alert = useSelector((state) => state.alert);
  const dispatch = useDispatch();

  useEffect(() => {
    history.listen((location, action) => {
      // clear alert on location change
      dispatch(alertActions.clear());
    });
  }, []);

  return (
    <Router history={hist}>
      <Switch>
        {/* <Route path="/admin" render={(props) => <AdminLayout {...props} />} /> */}
        <PrivateRoute exact path="/admin">
          <Dashboard />
        </PrivateRoute>
        <Route
          path="/auth/login"
          render={(props) => <AuthLayout {...props} />}
        />
        <Route exact path="/auth/forgotPassword" component={ResetPassword} />
        <Route exact path="/auth/mail_reset" component={MailReset} />
        <Redirect from="*" to="/auth/login" />
      </Switch>
    </Router>
  );
};

export default AppRouter;

PrivateRoute

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

import AdminLayout from "../layouts/Admin/Admin";

function PrivateRoute({ component: Component, roles, ...rest }) {
  console.log("rest pvt route", ...rest);
  return (
    <Route
      {...rest}
      render={(props) => {
        console.log("propsssss", props);
        // if (!localStorage.getItem('userid')) {
        if (!localStorage.getItem("access_token")) {
          // not logged in so redirect to login page with the return url
          return (
            <Redirect
              to={{ pathname: "/auth/login", state: { from: props.location } }}
            />
          );
        }

        // logged in so return component
        return <AdminLayout {...props} />;
      }}
    />
  );
}

export default { PrivateRoute };

Answer 1

所以试图解释它的错误所在：

您正在设置渲染 child 和 render props 这就是 children props 在这里优先的原因：

<Route
          exact
          path="/admin"
          render={(props) => <AdminLayout {...props} />}
        >
          {loggedIn ? <Redirect to="/admin/summary" /> : <Login />}
        </Route>

您的私人路线是正确的，但还需要添加您的布局：

return <AdminLayout {...props} /><Component {...props} /></AdminLayout/>;

在应用程序路由中，您需要导入 PrivateRoute 组件，它看起来像这样：

import PrivateRoute from './PrivateRoute';

const AppRouter = () => {
  const alert = useSelector((state) => state.alert);
  const loggedIn = useSelector((state) => state.authentication.loggedIn);

  const dispatch = useDispatch();

  useEffect(() => {
    history.listen((location, action) => {
      // clear alert on location change
      dispatch(alertActions.clear());
    });
  }, []);

  return (
    <Router history={hist}>
      <Switch>
        <PrivateRoute exact path='/admin'>
          <YOUR AUTH COMPONENT WHICH YOU WANT TO RENDER />
        </PrivateRoute>
        <Route
          path='/auth/login'
          render={(props) => <AuthLayout {...props} />}
        />
        <Route exact path='/auth/forgotPassword' component={ResetPassword} />
        <Route exact path='/auth/mail_reset' component={MailReset} />
        <Redirect from='*' to='/auth/login' />
      </Switch>
    </Router>
  );
};

这里我创建了这个的演示代码。借鉴一下：https://codesandbox.io/s/react-router-redirects-auth-forked-6q6o4?file=/example.js

条件路由不呈现重定向的布局

Conditional Route not rendering the redirected Layout

reactjs

react-router

react-router-v4