React路由异常：点击Sign In后LoginPage显示在App组件下方

你的问题出在路由结构设计错误：注册表单组件直接写在App的根JSX中，会始终渲染在页面上；而<Routes>组件是在当前位置渲染匹配路径的元素，所以点击/login后，LoginPage会和注册表单并列显示，而非替换页面。

修复步骤 #

1. 将注册表单作为根路径（/）的路由元素，让路由系统负责切换不同页面内容
2. 确保App组件被<BrowserRouter>包裹（这是React Router的基础配置，若还没加需要补充）

修改后的App.js代码 #

import { Routes, Route, Link } from 'react-router-dom';
import LoginPage from './LoginPage';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div className="bg-slate-700 w-100 flex flex-col justify-center h-full">
          <h1 className="font-bold text-white text-center justify-center">
            User Authentication
          </h1>
          {/* 把路由出口放在header内，根据布局需求调整位置 */}
          <Routes>
            {/* 根路径显示注册表单 */}
            <Route 
              path="/" 
              element={
                <form className="flex flex-col p-6 m-8 space-y-2 rounded-md bg-white">
                  <div className="text-cyan-500 text-center">
                    Have an account{" "}
                    <Link to="/login" className="underline">
                      Sign In
                    </Link>
                  </div>
                </form>
              } 
            />
            {/* /login路径显示登录页面 */}
            <Route path="/login" element={<LoginPage />} />
          </Routes>
        </div>
      </header>
    </div>
  );
}

export default App;

补充说明 #

• 若项目未配置路由上下文，需在入口文件（如index.js）中用<BrowserRouter>包裹App：

import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

• 配置完成后，访问/时显示注册表单，点击Sign In跳转到/login后，会替换注册表单的位置，显示LoginPage组件。

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