In the react web project, when I forcefully refresh the page, the route will be rendered faster than the permission acquisition interface, causing the page to be entered once before judging whether the page permissions are met before entering.

I am using the react-router-dom v6 version. The following is my routing code. Please help me analyze how to modify the code?This is my routing file code.

The roles data is obtained from the context of the AuthProvider component. The code inside is roughly UseEffect(()=>{
GetRoles();
},[])

const UseStartAuth = (props: { children: React.ReactNode }) => {
  const location = useLocation();

  const { roles } = useAuth();

  const token = localStorage.getItem("token");

  if (roles.isLoad === null && token === null) {
    return <Navigate to="/" state={{ from: location }} replace />;
  }

  if (roles.role && roles.role?.length === 0) {
    return <div>Not Found</div>;
  }

  return props.children;
};

const UseEndAuth = memo((props: { children: React.ReactNode }) => {
  const location = useLocation();

  const { roles } = useAuth();

  const token = localStorage.getItem("token");

  if (roles.isLoad === null && token === null) {
    return <Navigate to="/" state={{ from: location }} replace />;
  }

  if ((roles.role && roles.role?.length === 0) || !roles.role) {
    return <div>Not Found</div>;
  }

  return props.children;
});

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route
          element={
            <UseStartAuth>
              <Start />
            </UseStartAuth>
          }
        >
          <Route path="/Start/A" element={<A />} />
          <Route path="/Start/B" element={<B />} />
        </Route>
        <Route
          element={
            <UseEndAuth>
              <End />
            </UseEndAuth>
          }
        >
          <Route path="/End/E" element={<E />} />
          <Route path="/End/F" element={<F />} />
        </Route>

        <Route path="/NotFound" element={<NotFound />} />
      </Routes>
    </BrowserRouter>

function App() {
  return (
    <RecoilRoot>
      <BrowserRouter>
        <AuthProvider>
          <Router />
        </AuthProvider>
      </BrowserRouter>
    </RecoilRoot>
  );
}

export default App;