React.js开发登录组件时文本全部消失问题求助

问题出在React Router v6的路由语法使用错误，你用了旧版本（v5）的写法来编写v6的Route组件，导致路由无法正确渲染，进而引发组件渲染异常。

具体错误点： #

1. React Router v6中，Route组件不再支持将子组件直接嵌套在内部，必须通过element属性来指定要渲染的组件。
2. v6里已经移除了exact属性——因为默认的路由匹配规则就是精确匹配，不需要额外声明。

修改后的App.js代码： #

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

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          {/* 修正路由写法，使用element属性传入组件 */}
          <Route path = "/" element={<Login />} />
        </Routes>
      </Router>

      <h2> Testar </h2>
    </div>
  );
}

export default App;

修改后，Login组件的文本和"Testar"文本应该都能正常显示了。

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