导航“to”是否支持二级转发？

Question

这是我的app.jsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import OTAndTOGateKeeper from "./components/otAndTO/OTAndTOGateKeeper.jsx";
import LoginForm from "./components/otAndTO/LoginForm.jsx";
 return (
    <Router>
      <Routes>
        <Route path='/otAndTO' element={<OTAndTOGateKeeper/>}>
          <Route index element={<OTAndTOForm/>}/>
          <Route path="login" element={<LoginForm/>}/>
        </Route>        
      </Routes>
    </Router>
);

这是我的 OTAndTOGateKeeper.jsx

import { Navigate } from 'react-router-dom';
import OTAndTOForm from "./OTAndTOForm.jsx";
export default function OTAndTOGateKeeper(){
    let finalComponent;
    if (sessionStorage.getItem("accessToken")){
        finalComponent=<OTAndTOForm/>
    } else {
        finalComponent=<Navigate to="/otAndTO/login"/>
    }
    return finalComponent;
}

当我浏览“/otAndTO”时，它应该返回登录表单；不幸的是，没有任何回报。

但是，当我将 App.jsx 和 OTAndTOGateKeeper.jsx 更改为以下内容时：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import OTAndTOGateKeeper from "./components/otAndTO/OTAndTOGateKeeper.jsx";
import LoginForm from "./components/otAndTO/LoginForm.jsx";
 return (
    <Router>
      <Routes>
        <Route path='/otAndTO' element={<OTAndTOGateKeeper/>}>
          <Route index element={<OTAndTOForm/>}/>
        </Route>
        <Route path="login" element={<LoginForm/>}/>            
      </Routes>
    </Router>
);

import { Navigate } from 'react-router-dom';
import OTAndTOForm from "./OTAndTOForm.jsx";
export default function OTAndTOGateKeeper(){
    let finalComponent;
    if (sessionStorage.getItem("accessToken")){
        finalComponent=<OTAndTOForm/>
    } else {
        finalComponent=<Navigate to="/login"/>
    }
    return finalComponent;
}

它按预期工作。

这是我的环境：

"react-dom": "^18.3.1",
"react": "^18.3.1",
"react-router-dom": "^7.0.2"

我使用的是vite+react开发工具

顶级 URL 是唯一的工作吗？

Answer 1

OTAndTOGateKeeper

是一个布局路由组件，因此它必须渲染一个

Outlet

组件，以便嵌套路由将其

element

内容渲染到其中。它也无法返回到它所包装的路由的重定向。

OTAndTOForm

将在

/otAndTO

索引路线上渲染，因此

OTAndTOGateKeeper

不应该尝试渲染它。

将

OTAndTOGateKeeper

更新为以下内容：

import { Navigate, Outlet } from 'react-router-dom';
import OTAndTOForm from "./OTAndTOForm.jsx";

export default function OTAndTOGateKeeper() {
  return sessionStorage.getItem("accessToken")
    ? <Outlet />
    : <Navigate to="/otAndTO/login" replace />;
}

重新排列路由，使

OTAndTOForm

索引路由和

LoginForm

登录路由都呈现在父

"/otAndTO"

路由下，并仅在

OTAndTOGateKeeper

路由周围将

OTAndTOForm

呈现为受保护的布局路由。

<Router>
  <Routes>
    <Route path="/otAndTO">
      <Route element={<OTAndTOGateKeeper />}>
        <Route index element={<OTAndTOForm />} />
      </Route>
    <Route path="login" element={<LoginForm />} />
    </Route>      
  </Routes>
</Router>