React项目中Login组件导入后页面不显示，求助解决方案

问题分析 #

你的代码存在两个关键错误，导致Login组件无法正常显示：

1. react-router-dom v6路由写法错误：v6版本的Route组件不再支持直接嵌套子组件，必须通过element属性指定要渲染的组件，原写法会被路由忽略。
2. CSS flex-direction属性值错误：flex-direction: Column中的Column是大写，而CSS属性值要求小写的column，大写会被识别为无效值，导致容器布局失效，内容无法正常展示。

修正步骤及代码 #

1. 修正App.js的路由配置 #

将Route的子组件写法改为element属性传递组件：

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>
          <Route path="/" element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

2. 修正Login.js的样式错误 #

将flex-direction的属性值改为小写column：

import styled from "styled-components";

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

const Container = styled.section`
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100vh;
`;

const Content = styled.div`
  margin-bottom: 10vw;
  width: 100%;
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 80px 40px;
  height: 100%;
`;

export default Login;

额外检查项 #

• 确认已正确安装styled-components：执行npm install styled-components或yarn add styled-components
• 检查App.css中是否存在覆盖Login组件样式的全局规则

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