代码之家 › 专栏 › 技术社区 › The KNVB

导航“到”是否支持二级转发?

vite react-router reactjs javascript

The KNVB · 技术社区 · 6 月前

这是我的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的唯一工作吗?

1 回复 | 直到 6 月前

Drew Reese 6 月前

导航“到”是否支持二级转发?

是的,它将导航到您指定的任何路径。

OTAndTOGateKeeper 是布局路线组件,因此必须渲染a Outlet 嵌套路线渲染组件 element 内容进入。它也不能返回重定向到它正在包装的路线( 因为这取代了 折扣店 然后什么也没渲染! ).

OTAndTOForm 将在 /otAndTO 索引路线,因此 OTA和TOGateKeeper 也不应该试图渲染它。

更新 OTA和TOGateKeeper 具体如下:

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" 路线和渲染 OTA和TOGateKeeper 作为仅在周围受保护的布局路线 OTAndTOForm 路线。

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

推荐文章