使用react-router-dom的受保护页面不起作用

问题描述：使用react-router-dom的受保护页面不起作用。

回答： react-router-dom是React中用于实现路由功能的库，可以方便地进行页面的跳转和组件的渲染。在使用react-router-dom实现受保护页面时，通常会结合使用React的Context API和一些验证逻辑来实现权限控制。

首先，我们需要定义一个Context来存储用户登录状态信息。可以创建一个名为AuthContext的文件，如下所示：

// AuthContext.js
import { createContext, useState } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => {
    // 登录逻辑
    setIsAuthenticated(true);
  };

  const logout = () => {
    // 登出逻辑
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

在入口文件（通常是App.js）中，将AuthProvider包裹在Router组件外层，以便整个应用都能访问到AuthContext的值：

// App.js
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { AuthProvider } from './AuthContext';

const App = () => {
  return (
    <Router>
      <AuthProvider>
        <Route path="/" component={Home} />
        <Route path="/login" component={Login} />
        <Route path="/protected" component={Protected} />
      </AuthProvider>
    </Router>
  );
};

在需要受保护的组件中，可以使用useContext钩子来获取AuthContext中的值，并根据登录状态进行相应的处理。下面是一个Protected组件的示例：

// Protected.js
import { useContext } from 'react';
import { Redirect } from 'react-router-dom';
import { AuthContext } from './AuthContext';

const Protected = () => {
  const { isAuthenticated } = useContext(AuthContext);

  if (!isAuthenticated) {
    return <Redirect to="/login" />;
  }

  return <div>受保护的页面内容</div>;
};

在上述代码中，如果用户未登录，则会重定向到登录页面，否则会渲染受保护页面的内容。

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