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

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

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

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;

但我必须说你应该改为使用无状态函数，因为你只在那里使用 props:

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;

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

When Use Routes Components with different props get duplicated

reactjs

routes

react-props

react-component

react-state-management