如何在React JS中实现私有路由动画

npm install react-router-dom

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

const PrivateRoute = ({ component: Component, ...rest }) => {
  // 在这里添加你的私有路由动画逻辑

  return (
    <Route
      {...rest}
      render={props =>
        // 在这里添加你的私有路由动画组件
        // 如果用户已经登录，渲染传入的组件，否则重定向到登录页面
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

export default PrivateRoute;

import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Home from './Home';

const App = () => {
  return (
    <Router>
      <Switch>
        {/* 其他路由 */}
        <PrivateRoute path="/home" component={Home} />
      </Switch>
    </Router>
  );
};

export default App;

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

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = // 根据你的认证逻辑判断用户是否已登录

  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <CSSTransition
            in={true}
            appear={true}
            timeout={500}
            classNames="fade"
          >
            <Component {...props} />
          </CSSTransition>
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

export default PrivateRoute;