单击卡片，然后导航到带有详细信息的卡片页面，在react中

Question

我是React的新手，我正在尝试制作一个简单的应用程序…我从后端获取一些数据(一个带有公告的列表)，并与它们一起制作列表。当我从那个announcement中按下一个按钮时我想去到另一个组件那里我可以看到关于那个announcement的细节。我把我的代码:

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
carData: null,
checkData: false
}
}
getData = () => {
fetch('http://localhost:8000/api/all-articles')
.then( (response) => response.json() )
.then( (response) => {this.setState({
carData : response,
checkData : true
})});
}
componentDidMount = () => {
this.getData();
}
displayCars = () => {
return(
this.state.carData.data.map( (object, index) => (
<CarCard key={index} name = {object.title} description={object.description} img={object.image} id={object.id}/>
) )
);
}
render() {
if(this.state.checkData){
return(
<div className="App">
<Title/>
<div className="cars">
{this.displayCars()}
</div>
</div>
);
}else {
return(
<div>Loading..</div>
);
}
}
}
export default App;

class CarCard extends React.Component {

render() {
console.log(this.goToCardInfo(this.props.id));
return(
<div className="card">
<Card>
<Card.Img variant="top" src={`http://localhost:8000/images/${this.props.img}`}/>
<Card.Body>
<Card.Title>{this.props.name}</Card.Title>
<Card.Text>
{this.props.description}
</Card.Text>
<Button variant="primary">See announce</Button>
</Card.Body>
</Card>
</div>
);
}
}
export default CarCard;

class InfoCard extends React.Component {

render() {
return(
<h2>hello</h2>
);
}
}
export default InfoCard;

我想说，从后端我获取id，标题，描述，价格..我谷歌它，但我不明白我怎么能使它..谢谢你

Answer 1

我认为你需要react-router-dom
我建议你学习它。下面是我对路由器的实现。

App.js

import {BrowserRouter as Router, Switch, Route} from "react-router-dom"
import Cars from "./Cars.js" // Change it to the correct path
import InfoCard from "./InforCard.js"
class App extends React.Component {
render() {
<Router>
<Switch>
<Route path="/cars" component={Cars}></Route>
<Route path="/cars/:id" component={InfoCard} exact></Router>
<Switch>
</Router>
}
}
export default App;

Cars.js

class Cars extends React.Component {
constructor(props) {
super(props);
this.state = {
carData: null,
checkData: false
}
}
getData = () => {
fetch('http://localhost:8000/api/all-articles')
.then( (response) => response.json() )
.then( (response) => {this.setState({
carData : response,
checkData : true
})});
}
componentDidMount = () => {
this.getData();
}
displayCars = () => {
return(
this.state.carData.data.map( (object, index) => (
<CarCard key={index} name = {object.title} description={object.description} img={object.image} id={object.id}/>
) )
);
}
render() {
if(this.state.checkData){
return(
<div>
<Title/>
<div className="cars">
{this.displayCars()}
</div>
</div>
);
}else {
return(
<div>Loading..</div>
);
}
}
}
export default Cars;

CarCard.js

import { withRouter } from "react-router-dom"
class CarCard extends React.Component {
render() {
console.log(this.goToCardInfo(this.props.id));
return(
<div className="card">
<Card>
<Card.Img variant="top" src = {`http://localhost:8000/images/${this.props.img}`}/>
<Card.Body>
<Card.Title>{this.props.name}</Card.Title>
<Card.Text>
{this.props.description}
</Card.Text>
<Button variant="primary" 
onClick={() => this.props.history.push("/card/" + this.props.id)}>See announce</Button>
</Card.Body>
</Card>
</div>
);
}
}
export default withRouter(CarCard);

InfoCard.js

class InfoCard extends React.Component {
// you can get the id of the card like this
const url = window.location.hash;
const id = url.substring(url.lastIndexOf("/") + 1);
// use that id to query your car
render() {
return(
<h2>hello</h2>
);
}
}
export default InfoCard;