Html react.js应用程序中的一个组件与另一个组件重叠

我想像往常一样在app.js文件中呈现login.js组件，但今天我面临一个问题，比如react路由器中的一个组件重叠到另一个组件，尽管它们在我的react.js项目中都是单独的组件。我其实不明白为何这个问题会突然出现

这是我的组件，我将在react路由器内的App.js文件中渲染它

import React from "react";
import "./Login.css";

    const Login = () => {
      return (
        <div className="login_area">
          <div className="form_part">Hello World</div>
        </div>
      );
    };
    
    export default Login;

最后，这是我的App.js文件，我在其中渲染react路由器内的所有组件

import React, { Component } from "react";
//import React from 'react';
import logo from "./logo.svg";
import Navbar from "./components/navbar/Navbar.js";

import Home from "./components/home/Home";
import Footer from "./components/footer/Footer";
import About from "./components/about/About";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Login from "./components/authentication/Login";

class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Navbar></Navbar>
          <Switch>
            <Route path="/home">
              <Home></Home>
            </Route>
            <Route path="/about">
              <About></About>
            </Route>
            <Route path="/signin">
              <Login></Login>
            </Route>
            <Route path="/achievement"></Route>
            <Route path="/books"></Route>
            <Route path="/tutorials"></Route>
            <Route path="/blog"></Route>
          </Switch>
          <Footer></Footer>
        </Router>
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
//从“React”导入React；
从“/logo.svg”导入徽标；
从“/components/Navbar/Navbar.js”导入导航栏；
从“/components/Home/Home”导入主页；
从“/components/Footer/Footer”导入页脚；
从“/components/About/About”导入关于；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“/components/authentication/Login”导入登录名；
类应用程序扩展组件{
render（）{
返回(

如果您为应用程序的路由定义了多条路由，请使用下面的交换机组件

<Switch>

  <Route exact path="/" component={Home} />
  <Route path="/detail" component={Detail} />

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>



当您必须将
exact
关键字添加到其路径也包含在另一条路径中的路径中时。例如，主路径
/
包含在所有路径中，因此它需要具有
exact
关键字，以区别于以
/
开头的其他路径。原因也类似于
/
函数离子路径。如果您想使用另一个路由路径，如/functions detail或/functions/open-door，其中包含/functions，那么您需要对/functions路由使用
exact
。
应该对css文件进行一些更改，如下所示

现在它修复了

login_area {
  /* background: #f6f5f7; */
  background-image: url("../../images/Authentication/photo-1.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Montserrat", sans-serif;
  height: 100vh;
  /* margin: -20px 0 50px; */
}

它不起作用，我只使用过path=“/sign”一次，没有其他组件的路径与此类似。你有其他解决方案吗？使用
exact
，因为
/
在所有路径中都很常见。我尝试使用exact关键字，但结果仍然相同
login_area {
  /* background: #f6f5f7; */
  background-image: url("../../images/Authentication/photo-1.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Montserrat", sans-serif;
  height: 100vh;
  /* margin: -20px 0 50px; */
}