React Props传递不生效 启动后页面无内容如何解决？

页面空白和Props传递无关，核心错误是react-router-dom v6+版本的Route组件用法不符合规范。
v6版本起，Route组件不支持将待渲染的业务组件作为子元素嵌套书写，所有需要路由匹配后渲染的组件，必须通过Route的element属性传入，你当前把<Login />写在Route标签闭合前的子节点位置，路由匹配时不会渲染该组件，直接导致页面无内容。

• 调整Route组件的写法，将Login组件移到element属性上传入
• 清理Login组件中未使用的styled-components冗余导入，避免不必要的包体积占用
• 后续需要给路由组件传递Props时，直接在element属性内的组件标签上绑定属性即可，不存在传递不生效的问题

App.js #

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

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path="/" element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Login.js #

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

export default Login;

验证提示：修改保存后重启开发服务，访问根路径即可正常看到Login组件渲染的文本内容。如果后续需要传参，写法参考：<Route path="/" element={<Login theme="dark" />} />，Login组件内通过props.theme就能直接拿到传入的值。

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