I'm getting blank react-app page on using Route

Question

I'm having some kind of trouble when I'm using Router in App.js
I'm getting a blank page when I am using, I tried a lot but couldn't found a way to solve the issue.

<GuestRoute path="/Authenticate" element={<Authenticate />}>
</GuestRoute>

it is working fine with

<Route path="/Authenticate" element={<Authenticate />}>
</Route>

but I have to use GuestRoute.
Given below is the whole code:

App.js

import "./App.css";
import {BrowserRouter as Router, Routes, Route,   Navigate } from "react-router-dom";
import React from "react"
import Navigation from "./components/shared/Navigation/Navigation";
import Home from "./Pages/Home/Home";
import Register from "./Pages/Register/Register";
import Login from "./Pages/Login/Login";
import Authenticate from "./Pages/Authenticate/Authenticate";

const isAuth = true;


function App() {
  return (
    <div className="App">
     

      <Router>
            <Navigation /> 

            {/* switch(prev. versions) ----> Routes (new versions)) */}
            <Routes>                   

                <Route exact path="/" element={<Home />} >
                </Route>
                <GuestRoute path="/Authenticate" element={<Authenticate />}>
                </GuestRoute>
                
            </Routes>

      </Router> 

    </div>
  );
}

const GuestRoute = ({children,...rest}) => {
  return(
    <Route {...rest}
    render={({location})=>{
      return isAuth ? (
       <Navigate to={{
           pathname: '/rooms',
           state: {from: location}
         }}
        />
      ):(
        children
      );
    }}
    ></Route>
  );
};

  
export default App;

Answer 1

react-router-dom@6 doesn't use custom route components. The new pattern used in v6 are either wrapper components or layout route components.

Wrapper component example:

const GuestWrapper = ({ children }) => {
  ... guest route wrapper logic ...

  return (
    ...
    {children}
    ...
  );
};

...

<Router>
  <Navigation /> 

  <Routes>                   
    <Route path="/" element={<Home />} />
    <Route
      path="/Authenticate"
      element={(
        <GuestWrapper>
          <Authenticate />
        </GuestWrapper>
      )}
    />
  </Routes>
</Router>

Layout route component example:

import { Outlet } from 'react-router-dom';

const GuestLayout = () => {
  ... guest route wrapper logic ...

  return (
    ...
    <Outlet /> // <-- nested routes render here
    ...
  );
};

...

<Router>
  <Navigation /> 

  <Routes>                   
    <Route path="/" element={<Home />} />
    <Route element={<GuestLayout>}>
      <Route path="/Authenticate" element={<Authenticate />} />
      ... other GuestRoute routes ...
    </Route>
  </Routes>
</Router>