React Router v6中重定向时如何触发提示函数？

你不能直接在三元运算符里调用alert()，因为element属性需要接收合法的React元素，而alert()是无返回值的函数调用，无法作为React元素渲染。可以通过以下几种方式实现需求：

方法1：自定义带提示的重定向组件 #

创建专门组件，在内部通过useEffect触发提示后返回重定向元素，逻辑更清晰规范：

import React from "react";
import {
  BrowserRouter as Router,
  Link,
  Route,
  Routes,
  Navigate,
} from "react-router-dom";
import NotFoundPage from "./pages/404/NotFoundPage";
import AboutPage from "./pages/about-faqs/AboutPage";
import HomePage from "./pages/home/HomePage";
import ProfilePage from "./pages/profile/ProfilePage";
import ProtectedRoute from "./pages/Protected-Routes/protectedRoute";
import TaskDetailPage from "./pages/tasks/TaskDetailPage";
import TasksPage from "./pages/tasks/TasksPage";

// 新增带提示的重定向组件
const RedirectWithAlert = () => {
  React.useEffect(() => {
    alert("请先登录才能访问个人中心页面");
  }, []);

  return <Navigate to="/" replace />;
};

function AppRoutingOne() {
  const logged = false;

  return (
    <Router>
      <div>
        <ul style={{ display: "flex", justifyContent: "space-between" }}>
          <li>
            <Link to="/"> Home </Link>
          </li>
          <li>
            <Link to="/about"> About </Link>
          </li>
          <li>
            <Link to="/faqs"> FAQs </Link>
          </li>
        </ul>
      </div>

      <main>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/faqs" element={<AboutPage />} />

          <Route
            path="/profile"
            element={logged ? <ProfilePage /> : <RedirectWithAlert />}
          />

          <Route path="/task" element={<TasksPage />} />
          <Route path="/task/:id" element={<TaskDetailPage />} />

          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
    </Router>
  );
}

export default AppRoutingOne;

方法2：JSX表达式内直接执行提示（简易快速版） #

虽然不推荐在JSX中直接处理副作用，但可以借助空标签执行alert()——它是同步函数，会先弹出提示再渲染重定向元素：

<Route
  path="/profile"
  element={
    logged ? (
      <ProfilePage />
    ) : (
      <>
        {alert("请先登录才能访问个人中心页面")}
        <Navigate to="/" replace />
      </>
    )
  }
/>

方法3：复用ProtectedRoute组件（推荐） #

你已经导入了ProtectedRoute，可以把提示逻辑整合进去，实现路由保护逻辑复用，后续其他需要登录的路由都能直接使用：

// 修改 ./pages/Protected-Routes/protectedRoute.jsx
import React from "react";
import { Navigate } from "react-router-dom";

const ProtectedRoute = ({ logged, children }) => {
  React.useEffect(() => {
    if (!logged) {
      alert("请先登录才能访问该页面");
    }
  }, [logged]);

  return logged ? children : <Navigate to="/" replace />;
};

export default ProtectedRoute;

然后在路由中使用：

<Route
  path="/profile"
  element={
    <ProtectedRoute logged={logged}>
      <ProfilePage />
    </ProtectedRoute>
  }
/>

内容的提问来源于stack exchange，提问作者Joe Martínez