React Private Route在刷新时登录之前正在重定向

React Private Route是一个用于React应用程序的路由组件，它用于在用户未登录或未经授权时重定向到登录页面或其他指定页面。当用户刷新页面时，React应用程序会重新加载，这可能导致用户在登录之前被重定向到其他页面。

为了解决这个问题，我们可以使用以下步骤来实现React Private Route在刷新时登录之前正在重定向：

创建一个PrivateRoute组件，该组件将接收一个布尔值（表示用户是否已登录）和一个要渲染的组件作为参数。
在PrivateRoute组件中，使用React Router的Route组件来定义一个路由。该路由将根据用户是否已登录来决定渲染哪个组件。
如果用户已登录，则渲染传递给PrivateRoute组件的组件。
如果用户未登录，则使用React Router的Redirect组件将用户重定向到登录页面或其他指定页面。
在App组件中使用PrivateRoute组件来保护需要登录才能访问的页面。

下面是一个示例代码：

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

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

export default PrivateRoute;

在上面的示例中，PrivateRoute组件接收了一个名为isLoggedIn的布尔值，表示用户是否已登录。如果用户已登录，则渲染传递给PrivateRoute组件的组件；如果用户未登录，则使用Redirect组件将用户重定向到"/login"页面。

使用PrivateRoute组件来保护需要登录才能访问的页面的示例：

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

const App = () => {
  const isLoggedIn = checkUserLoggedIn(); // 检查用户是否已登录的函数

  return (
    <Router>
      <Switch>
        <PrivateRoute
          exact
          path="/"
          component={HomePage}
          isLoggedIn={isLoggedIn}
        />
        <Route path="/login" component={LoginPage} />
      </Switch>
    </Router>
  );
};

export default App;

在上面的示例中，PrivateRoute组件用于保护"/"路径对应的HomePage组件，只有在用户已登录时才能访问该页面。如果用户未登录，则会被重定向到"/login"页面。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云轻量应用服务器（Lighthouse）。

腾讯云云服务器（CVM）产品介绍链接地址：https://cloud.tencent.com/product/cvm

腾讯云轻量应用服务器（Lighthouse）产品介绍链接地址：https://cloud.tencent.com/product/lighthouse