When Use Routes Components with different props get duplicated

Question

Without routing my app is rendered successfully. Here is the image

But when I added routes to my project it doesn't render properly as previously it renders the last component and duplicates it. Here is the image

Here I added my Profile.js component Code

                <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;

And app.js routing part

 <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>

as well as 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

at your Aboutus class you should not declare those variables outside. you don't need to call constructor anymore for a long time, it's called implicitly. you only need to extract your props at render (you don't actually need it, but avoids verbosity) and you are ready to go:

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;

but I must say that you should change for a stateless function instead, given you only consume props there:

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;