目前我有一个对象列表页面。 我想显示单个对象的详细信息页面(所有操作都使用Reactjs完成)。 列出的对象具有以下链接:
<Link to={'/detail/'+this.props.data.id} >Read more</Link>
点击链接后,它将指向另一个页面,在该页面中我想显示该特定对象的所有详细信息。该特定对象的详细信息从http://127.0.0.1:8000/api/v1/songs/55获取,其中55是对象的id。我正在使用Redux从API获取数据。
ListingPage.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
class List extends React.Component {
render() {
return (
<div>
<Link to={'/detail/'+this.props.data.id} >Read more</Link>
</div>
);
}
}
export default List
Home.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import List from './ListPage.js';
import Detail from './Detail.js'
class Home extends React.Component {
render(){
return(
<Router>
<Switch>
<Route exact path="/" component={List} />
<Route path="/detail/:number" component={Detail} />
</Switch>
</Router>
)
}
}
export default Home
Detail.js
import React from 'react';
class Detail extends React.Component {
render() {
return (
<div>{**display details here**}</div>
)
}
}
export default Detail
目前点击链接后,它会指向另一个页面,但没有显示任何详细信息。我不知道如何在react-redux中从链接url中获取id。请帮帮我。(严肃地说,我必须使用Redux)
<Link to={'/detail/'+this.props.data.id}
中获取id
吗?然后将它传递给 react-redux 来管理状态吗? - Aaqib