React应用中独立登录路由跳转异常问题求助

问题原因 #

React Router v6 要求所有 <Route> 组件必须嵌套在 <Routes> 或另一个 <Route> 内部，你之前把 /login 路由直接放在 <Router> 下的写法不符合规范，会导致路由系统异常，进而出现页面空白、路由无法匹配的问题。

解决方案 #

通过布局组件+嵌套路由的方式，区分独立路由和带公共布局的路由：

1. 创建公共布局组件
   新建一个布局组件，包含需要共享的 Header 和 Footer，用 <Outlet> 渲染子路由的内容：

   import { Outlet } from 'react-router-dom';
   
   function Layout() {
     return (
       <>
         <Header />
         <Outlet /> {/* 子路由内容会渲染在这里 */}
         <Footer />
       </>
     );
   }
   

2. 重构 App.js 的路由结构
   将所有路由放入 <Routes> 内部，独立的 /login 路由直接渲染 Login 组件，其他页面通过嵌套路由使用公共布局：

   import { Router, Routes, Route } from 'react-router-dom';
   import Layout from './Layout';
   import Login from './Login';
   import Home from './Home';
   import Page1 from './Page1';
   import Header from './Header';
   import Footer from './Footer';
   
   function App() {
     return (
       <Router>
         <Routes>
           {/* 独立登录路由，无 Header/Footer */}
           <Route path="/login" element={<Login />} />
           {/* 带公共布局的路由组 */}
           <Route element={<Layout />}>
             <Route path="/" element={<Home />} />
             <Route path="/page1" element={<Page1 />} />
           </Route>
         </Routes>
       </Router>
     );
   }
   
   export default App;
   

3. 修正 Login 组件的窗口关闭逻辑
   你当前的 useEffect 清理函数是在组件卸载时执行（比如离开 /login 路由时），如果需要页面加载后立即关闭窗口，应该直接在组件挂载时调用 window.close()：

   import React, { useEffect } from "react";
   
   function Login() {
     useEffect(() => {
       // 组件挂载后立即关闭窗口
       window.close();
     }, []);
   
     return <h1>This window should be closed</h1>;
   }
   
   export default Login;
   

效果说明 #

• 访问 /login 时，仅渲染 Login 组件，无 Header 和 Footer，页面加载后自动关闭当前窗口。
• 访问 / 或 /page1 时，会渲染包含 Header、对应页面内容和 Footer 的完整布局。

内容的提问来源于stack exchange，提问作者altern