我在使用 Route 时得到空白的反应应用程序页面

Question

我在 App.js
中使用路由器时遇到了一些问题我在使用的时候出现了一个空白页面，我尝试了很多都没有找到解决问题的方法。

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

与

配合使用效果很好

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

但我必须使用 GuestRoute。
下面给出了整个代码：

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 不使用自定义路由组件。 v6 中使用的新模式是包装器组件或布局路由组件。

包装组件示例：

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>

布局路由组件示例：

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>

我在使用 Route 时得到空白的反应应用程序页面

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

javascript

reactjs

react-router

react-router-dom