使用React功能组件重定向

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;