创建一个受保护的React路由

要创建一个受保护的React路由，可以使用React Router库和一些条件逻辑来实现。以下是一个示例解决方案：

首先，确保已经安装了React Router。可以使用以下命令进行安装：

npm install react-router-dom

然后，创建一个名为ProtectedRoute.js的新组件，并添加以下代码：

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

// 创建一个受保护的路由组件
const ProtectedRoute = ({ component: Component, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        if (isAuthenticated) {
          // 如果用户已经登录，则渲染传入的组件
          return <Component {...props} />;
        } else {
          // 如果用户未登录，则重定向到登录页面
          return <Redirect to="/login" />;
        }
      }}
    />
  );
};

export default ProtectedRoute;

在上面的代码中，我们创建了一个名为ProtectedRoute的组件，它接受三个属性：component，isAuthenticated和rest。component属性是要渲染的受保护组件，isAuthenticated属性表示用户是否已经登录，rest属性是传递给React Router的其他属性。

然后，我们在render方法中使用条件逻辑来确定应该渲染哪个组件。如果用户已经登录（即isAuthenticated为true），则渲染传入的组件。否则，我们使用React Router的Redirect组件将用户重定向到登录页面。

现在，我们可以在应用程序的路由配置中使用ProtectedRoute组件。假设我们有一个名为App.js的主组件，我们的路由配置如下：

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

const App = () => {
  const isAuthenticated = true; // 根据实际情况设置用户是否已经登录

  return (
    <Router>
      <Switch>
        <Route exact path="/login" component={Login} />
        <ProtectedRoute
          exact
          path="/"
          component={Home}
          isAuthenticated={isAuthenticated}
        />
      </Switch>
    </Router>
  );
};

export default App;

在上面的代码中，我们使用了ProtectedRoute组件来包装Home组件的路由。我们将isAuthenticated属性设置为一个布尔值，表示用户是否已经登录。

这样，当用户尝试访问根路径（'/'）时，ProtectedRoute组件将会根据isAuthenticated属性的值来决定是渲染Home组件还是重定向到登录页面。

请根据实际情况调整代码中的路由和条件逻辑。这只是一个示例解决方案，你可以根据自己的需求进行修改和扩展。