React.js中如何在同标签页打开独立的登录页面？

问题原因 #

你的Layout组件和Routes在App.jsx中是同级渲染的，导致Layout会一直固定显示在页面上，路由匹配的Login/About组件直接渲染在Layout下方，因此出现登录页面跟在按钮后面的情况。

解决方案 #

调整路由结构，让Layout仅作为需要显示导航按钮的页面（比如About）的父组件，/login路由单独渲染，不包含Layout。具体修改如下：

1. 修改Layout.jsx，添加Outlet承载子路由内容 #

引入react-router-dom的Outlet，用来渲染子路由对应的页面内容：

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

function Layout() {
  return (
    <div>
      <Link to="/about">
        <button>About</button>
      </Link>
      <Link to="/login">
        <button>Login</button>
      </Link>
      {/* 子路由（如About）的内容会渲染到这里 */}
      <Outlet />
    </div>
  );
}

export default Layout;

2. 修改App.jsx的路由结构 #

将Layout设为父路由组件，把需要显示导航的页面（如About）作为其子路由，/login路由单独配置：

import { Routes, Route } from 'react-router-dom';
import About from './about';
import Layout from './Layout';
import Login from './login';

function App() {
  return (
    <Routes>
      {/* 所有需要显示Layout导航的页面都放在这个父路由下 */}
      <Route element={<Layout />}>
        <Route path='/about' element={<About />} />
        {/* 可按需添加首页路由，比如path='/' element={...} */}
      </Route>
      {/* 登录路由单独渲染，不显示Layout */}
      <Route path='/login' element={<Login />} />
    </Routes>
  );
}

export default App;

3. 效果验证 #

现在点击Login按钮，会跳转到/login路径，页面仅显示Login组件内容，不再显示Layout的导航按钮；点击About按钮，会回到带有导航按钮的页面，下方显示About内容。

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