使用React功能组件重定向

基础概念

React 功能组件（Functional Components）是 React 中用于构建用户界面的纯函数组件。它们接收 props 并返回 JSX 元素。功能组件相对于类组件（Class Components）更为简洁，易于理解和维护。

重定向（Redirect）通常用于将用户从一个页面导航到另一个页面。在 React 应用中，可以使用 React Router 库来实现页面重定向。

类型

条件重定向：根据某些条件决定是否重定向。
编程式重定向：通过代码逻辑实现重定向。
声明式重定向：通过配置路由实现重定向。

应用场景

登录验证：用户登录后重定向到主页。
权限控制：根据用户权限重定向到不同的页面。
表单提交：表单提交后重定向到成功或失败页面。

示例代码

假设我们有一个简单的 React 应用，使用 react-router-dom 库来实现重定向。

首先，安装 react-router-dom：

npm install react-router-dom

然后，创建一个简单的功能组件并实现重定向：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

// 示例功能组件
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const Dashboard = () => <h1>Dashboard Page</h1>;

// 条件重定向组件
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
      )
    }
  />
);

const App = () => {
  const isAuthenticated = false; // 假设用户未认证

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <PrivateRoute path="/dashboard" component={Dashboard} isAuthenticated={isAuthenticated} />
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
  );
};

const Login = () => {
  // 登录逻辑
  return <h1>Login Page</h1>;
};

export default App;