React Router路由未渲染内容：登录页面无法正常显示求助

你的问题出在react-router-dom v6的Route组件用法上，v6版本彻底改变了路由配置逻辑，和旧版本差异很大：

1. Route不再支持通过children渲染组件：v6里，Route的children仅用于嵌套路由场景（比如布局组件嵌套子路由），要渲染的业务组件必须通过element属性传递。你原来的写法里，<Login />作为Route的子元素不会被渲染，只有element里的<div>I am good</div>会显示，所以看不到Login组件的内容。

2. exact属性已被移除：v6的Routes组件会自动按最精确的路径匹配，不需要再手动添加exact属性。

修改后的App.js代码： #

import React from 'react';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Login from "./components/Login";
import './App.css';

function App() {
  return (
     <div className="App">
      <Router>
        <Routes>
          {/* 直接把Login组件放到element属性中 */}
          <Route path="/login" element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

如果需要同时显示I am good和Login组件，可以用React片段包裹：

<Route path="/login" element={
  <>
    <div>I am good</div>
    <Login />
  </>
} />

额外提示： #

你的Login.js里定义了Container样式组件但未使用，若需要应用该样式，可修改Login组件的返回内容：

const Login = (props) => {  
    return (
        <Container>Login</Container>
    );
};

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