当使用具有不同道具的路由组件时重复

Question

如果没有路由，我的应用程序将成功呈现。这是图片

但是当我向我的项目添加路由时，它并没有像以前那样正确渲染它渲染最后一个组件并复制它。这是图片

这里我添加了我的 Profile.js 组件代码

                <div className={'row bg-light text-dark p-4 '} id="about">
                    <div className="container-fluid">
                        <div className={'row text-muted'}><i className="bi bi-person-lines-fill"></i>&nbsp; About us</div>
                        <div className={'row text-muted'}><small>We are Team D</small></div>
                        <div align={"center"}>
                            <Aboutus name={"Dineth Shan Gimhana"} id={"SE/2017/013"} profile={deneth}/>
                            <Aboutus name={"Chinthaka Chathuranga"} id={"SE/2017/003"} profile={chinth}/>
                            <Aboutus name={"Randi Ayeshani"} id={"SE/2017/025"} profile={randi}/>
                            <Aboutus name={"Thilina Madushan"} id={"SE/2017/033"} profile={thili}/>
                            <Aboutus name={"Gnanasegaram Mangalan"} id={"SE/2017/028"} profile={mang}/>
                            <Aboutus name={"Josiah Prathaban"} id={"SE/2017/022"} profile={josiah}/>
                        </div>
                    </div>
                </div>
            </div>

Aboutus.js

import React, { Component } from 'react'

let name=""
let id=""
let profile= {}
let description =""


class Aboutus extends Component{

    constructor(props) {
        super(props)
        name = this.props.name
        id = this.props.id
        profile = this.props.profile
        description = this.props.description
    }
    render() {
        return(
            <div className="card d-inline-block m-2 p-3 bg-light border-light" align={"center"}>
                <img src={profile} className="rounded-circle h5" width={"150px"} alt="LogoImage"/><br/>
                <span>{name}</span><br/>
                <span className="mb-2 text-muted">{id}</span>
                <p className="card-text">{description}</p>
            </div>
        )

    }
}
export default Aboutus;

和app.js 路由部分

 <div className="container mt-3">
          <Switch>
            <Route exact path={["/", "/home","/login"]} component={Login}/>
            <Route exact path="/register" component={Register} />
            <Route exact path="/profile" component={Profile} />
            <Route path="/user" component={BoardUser} />
          </Switch>
        </div>

以及index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

serviceWorker.unregister();

Answer 1

在您的 Aboutus 课程中，您不应在外部声明这些变量。您不再需要长时间调用构造函数，它是隐式调用的。你只需要在渲染时提取你的道具（你实际上并不需要它，但避免冗长），你就可以开始了：

import React, { Component } from 'react'

class Aboutus extends Component{
    render() {
        const { name, id, profile, description } = this.props
        return(
            <div className="card d-inline-block m-2 p-3 bg-light border-light" align={"center"}>
                <img src={profile} className="rounded-circle h5" width={"150px"} alt="LogoImage"/><br/>
                <span>{name}</span><br/>
                <span className="mb-2 text-muted">{id}</span>
                <p className="card-text">{description}</p>
            </div>
        )
    }
}
export default Aboutus;

但我必须说，你应该改用无状态函数，因为你只在那里消耗道具：

import React from 'react'

const Aboutus = ({name, id, profile, description}) => (
  <div className="card d-inline-block m-2 p-3 bg-light border-light" align={"center"}>
      <img src={profile} className="rounded-circle h5" width={"150px"} alt="LogoImage"/><br/>
      <span>{name}</span><br/>
      <span className="mb-2 text-muted">{id}</span>
      <p className="card-text">{description}</p>
  </div>
)

export default Aboutus;