react.js 应用中的一个组件与其他组件重叠

Question

我想像往常一样在 app.js 文件上渲染我的 login.js 组件，但今天我遇到了一个问题，就像 react-router 中的一个组件重叠到另一个组件中，尽管它们中的每一个是我的 react.js 项目中的一个单独组件。我其实不明白为什么会突然出现这个问题

这是我的组件，我将在 react-router 中的 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;

CSS 这个组件如下....

* {
  margin: 0;
  padding: 0;
}

.login_area {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.4),
    url(../../images/Authentication/photo-1.jpeg)
  );
  background-position: center;
  background-size: cover;
  position: absolute;
  background-repeat: no-repeat;
  overflow: hidden;
}

.form_part {
  width: 380px;
  height: 480px;
  position: absolute;
  margin: 6% auto;
  background: darkolivegreen;
  overflow: hidden;
  padding: 10px;
}

最后，这是我的 App.js 文件，我在其中渲染 react-router 中的所有组件...

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;

这是我在浏览器中的代码片段，点击下方 link

enter image description here

Answer 1

如果您为应用的路由定义了多个路由，像这样包含在 Switch 组件中；

<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 关键字添加到它的路径也包含在另一个路径的路径中。例如 home 路径 / 包含在所有路径中，因此它需要有 exact 关键字来区别于其他以 / 开头的路径。原因也类似于/functions路径。如果你想使用另一个路由路径，比如 /functions-detail 或 /functions/open-door 其中包含 /functions 那么你需要使用 exact 作为 /functions 路由。

Answer 2

下面的 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; */
}

react.js 应用中的一个组件与其他组件重叠

One component overlapping on other in react.js app

html

css

reactjs

react-router

react-component