在反应中重定向到主页时出错

Question

我试图使用以下代码限制登录用户访问登录页面

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

 const UserLayoutRoute = ({ component: Component, ...rest }) => {  
 const [loggedIn, setLoggedIn] = useState(null);   useEffect(() => {
    if (localStorage.getItem("cachedValue") !== null) {
      setLoggedIn(true);
    }   }, []);   return loggedIn ? (
    <Route
      {...rest}
      render={matchProps => (
        <div className="App">
          <section className="user-page">
            <div className="">
              <div className="">
                <Component {...matchProps} />
              </div>
            </div>
          </section>
        </div>
      )}
    />   ) : (
    <Redirect to="/"  />   ); };

 export default UserLayoutRoute;

使用此代码页继续加载并且不呈现任何内容。

我也在 GitHub https://github.com/facebook/react/issues/17514 中发布了这个问题

Answer 1

我认为也许您可以尝试其他方法

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

const PrivateRouteComponent = ({ component: Component, isAuth, ...rest }) => (
  <Route
    {...rest}
    render={props => (
      isAuth
        ? <Component {...props} />
        : <Redirect to="/login" />
    )}
  />
);

PrivateRouteComponent.propTypes = {
  component: PropTypes.any.isRequired,
  isAuth: PropTypes.bool.isRequired,
};

export default PrivateRouteComponent;

在这种情况下，路线

<Switch>
        <PrivateRouteComponent exact path="/" component={**ComponentName**} isAuth={isAuth} />
</Switch>

对于 isAuth 道具的情况，您可以根据自己的情况更改它