反应JS<navigate /> 没有醒来

Question

I am checking if a user has the "admin" role then they can access the protected "/home" route otherwise they should be redirected back to the "/" route. But when a non-admin user is accessing the "/home" route they are not being redirected back to the "/".

App.js

import "./App.css";

import React from "react";
import { Route, Routes, Navigate } from "react-router-dom";

import Landing from "./components/Landing";
import PhoneDetails from "./components/PhoneDetails";
import Home from "./components/Home/App.jsx";
import Signup from "./components/Signup";
import SignIn from "./components/Signin";
import ForgotPassword from "./components/ForgotPassword";

import { auth } from "./firebase-config.js";
import { useEffect } from "react";
import FirebaseData from "./firebaseData";

function App() {
  // getting the user data from firebase
  const firebaseData = FirebaseData();

  const [displayName, setDisplayName] = React.useState("");
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
  const [role, setRole] = React.useState("");

  useEffect(() => {
    if (firebaseData) {
      auth.onAuthStateChanged((user) => {
        if (user) {
          // User is signed in
          // ...
          setIsAuthenticated(true);
          setDisplayName(user.displayName);
          setRole(firebaseData.users?.[user.uid]?.role);
        } else {
          // User is signed out
          // ...
          setIsAuthenticated(false);
          setDisplayName("");
          setRole("");
        }
      });
    }
  }, [firebaseData]);

  return (
    <Routes>
      <Route
        path="/"
        exact
        element={
          <Home
            isAuthenticated={isAuthenticated}
            displayName={displayName}
            role={role}
          />
        }
      />
      <Route path="/signup" element={<Signup />} />
      <Route path="/signin" element={<SignIn />} />
      <Route path="/forgot-password" element={<ForgotPassword />} />


      // ERROR ON THIS LINE
      {role === "admin" && (
        <Route
          path="/home"
          element={
            isAuthenticated && role === "admin" ? (
              <Landing />
            ) : (
              <Navigate replace to="/" />
            )
          }
        />
      )}

      <Route
        path="/details"
        element={
          isAuthenticated && role === "admin" ? (
            <PhoneDetails />
          ) : (
            <Navigate replace to="/" />
          )
        }
      />
      
      <Route path="/" element={<Navigate replace to="/" />} />
    </Routes>
  );
}

export default App;

I tried using Navigate for this but it is not working. I know it maybe a novice mistake but I am not able to understand why they are not being redirected to the "/" route. Any help is appreciated!

Answer 1

can you try like this,

<BrowserRouter>
      <Routes>
        <Route path="/" exact element={<div>Default route</div>}></Route>
        {role === "admin" && (
          <Route
            path="/home"
            element={
              isAuthenticated && role === "admin" ? (
                <div>Success page</div>
              ) : (
                <Navigate replace to="/" />
              )
            }
          />
        )}
      </Routes>
    </BrowserRouter>