我编辑添加到您的代码，并添加新的组件：

import React, { useEffect } 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";

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 />} />

          //This is the part of my problem, in this case. How do I display an "alert()" inside the ternary operator?

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

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

          {/* 404 - Page Not Found */}
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
    </Router>
  );
}

export default AppRoutingOne;

在此组件中，您可以检查记录属性。如果记录为false，则可以向用户显示警报：

function ProfileCntroller({logged}){
    useEffect(()=>{
        if(!logged){
            alert('alert text');
        }
    },[]);

    if(logged){
        return <ProfilePage /> }
    else{
        return <Navigate to="/" replace />
    }
}

App.js

import React from "react";
import {
  BrowserRouter as Router,
  Link,
  Route,
  Routes,
  Navigate,
  Outlet
} 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";

function Protected({ children }) { 
// you may want to store isSignedIn value in a reactive state, may be  use redux etc
  const isSignedIn = someReactiveState; 
  if (!isSignedIn) {
    alert("You should log in !")
    return <Navigate to="/" replace />;
  }
  return <Outlet />;
}

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 />} />
            {/*All Protected Routes here ! */}
          <Route element={<Protected />}>
            <Route path="/profile" element={<ProfilePage />} />
          </Route>
      

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

          {/* 404 - Page Not Found */}
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
    </Router>
  );
}

export default AppRoutingOne;

Outlet将是已经在子路由中的组件！