Блог

В AppRouter у меня есть условный маршрут с перенаправлением для <AdminLayout/> .

соответствующий фрагмент:

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

Если loggedIn значение true, тогда перенаправьте на /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 };
  

Итак, пытаюсь объяснить, что это неправильно:

1. Вы настраиваете рендеринг, child и render props поэтому children здесь приоритет имеет props:

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

2. Ваш частный маршрут правильный, но также необходимо добавить свой макет:

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

3. Внутри маршрута приложения вам нужно импортировать 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