如何解决当使用具有不同道具的路由组件重复时
没有路由我的应用程序就成功呈现。这是图片
但是当我将路由添加到我的项目时,它不会像以前那样正确渲染,它会渲染最后一个组件并复制它。这是图片
<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> 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();
解决方法
在你的 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,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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。