我们希望,点击每一个List 进入详情页的时候,把它的id 也传递给详情页,这样详情页就可以根据id 返回对象的值了。
这儿,我们有两种方式\。
首先我们来看看动态路由:
打开 src/pages/home/components/List 如下。
import React, {PureComponent} from 'react';
import { connect } from 'react-redux';
import { ListItem, ListInfo, LoadMore } from '../style';
import { actionCreators } from '../store';
import { Link } from "react-router-dom";
class List extends PureComponent {
render () {
const { articleList, getMoreList, articlePage } = this.props;
return (
<div>
{
articleList.map( (item) => {
return (
<Link key={item.get("id")} to="/detail">
<ListItem key={item.get('id')}>
<img
className='pic'
src={item.get('imgURL')}
alt=''
/>
<ListInfo>
<h3 className='title'>{item.get('title')}</h3>
<p className='desc'>{item.get('desc')}</p>
</ListInfo>
</ListItem>
</Link>
)
} )
}
<LoadMore onClick={ () => getMoreList(articlePage)}>更多文字</LoadMore>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
articleList: state.get("home").get("articleList"),
articlePage: state.get("home").get("articlePage")
}
};
const mapDispatchToProps = (dispatch) => {
return {
getMoreList (page) {
dispatch(actionCreators.getMoreList(page));
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(List);
我们只要把 Link 的 to 改一下,如下。
<Link key={item.get("id")} to={"/detail/" + item.get("id")}>
<ListItem key={item.get('id')}>
<img
className='pic'
src={item.get('imgURL')}
alt=''
/>
<ListInfo>
<h3 className='title'>{item.get('title')}</h3>
<p className='desc'>{item.get('desc')}</p>
</ListInfo>
</ListItem>
</Link>
然后我们还得改一下 src/App.js 把路由得路径加一个参数,如下。
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { GlobalStyle } from './style.js';
import Header from './common/header';
import store from './store/index';
import Home from './pages/home';
import Detail from './pages/detail';
class App extends Component {
render() {
return (
<div>
<GlobalStyle />
<Provider store={store}>
<div>
<BrowserRouter>
<Header />
<Route path='/' exact component={Home}></Route>
<Route path='/detail/:id' exact component={Detail}></Route>
</BrowserRouter>
</div>
</Provider>
</div>
);
}
}
export default App;
接下来,我们在详情页面,获得传递过来得参数 id 。我们打开详情页面 src/pages/detail 下得 index
我们在 render 函数中,打印出 this.props 。如下,可以看到match 中 params 中,包含了 id 项。
因此我们通过上面得属性就可以拿到传递过来的id . 我们在发送 ajax 请求的时候,把这个id 传出去,如下。
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { DetailWrapper,
Header,
Content
} from './style';
import { actionCreators } from './store';
class Detail extends Component {
render () {
const { title, content } = this.props;
return (
<DetailWrapper>
<Header>
{ title }
</Header>
<Content dangerouslySetInnerHTML={{__html: content}}>
</Content>
</DetailWrapper>
)
}
componentDidMount () {
this.props.getDetail(this.props.match.params.id);
}
}
const mapState = (state) => {
return {
title: state.get("detail").get("title"),
content: state.get("detail").get("content")
}
}
const mapDispatch = (dispatch) => {
return {
getDetail (id) {
const action = actionCreators.getDetail(id);
dispatch(action);
}
}
}
export default connect(mapState, mapDispatch)(Detail);
然后,我们在 actionCreators.js 中就可以把id 传给后端,如下。
import axios from 'axios';
import * as actionTypes from './actionTypes';
const chanegDetail = (title, content) => {
return {
type: actionTypes.CHANGE_DETAIL,
title,
content
}
}
export const getDetail = (id) => {
return (dispatch) => {
axios.get('/api/detail.json?id=' + id).then((res) => {
const result = res.data.data;
const action = chanegDetail(result.title, result.content);
dispatch(action);
})
}
}
ok. 以上就是动态路由获取参数。
下面我们试一试第二种写法,首先,我们也是先改一下 List.js ,将之前的Link 的to 属性变成这样
<Link key={item.get("id")} to={"/detail?" + item.get("id")}>
<ListItem key={item.get('id')}>
<img
className='pic'
src={item.get('imgURL')}
alt=''
/>
<ListInfo>
<h3 className='title'>{item.get('title')}</h3>
<p className='desc'>{item.get('desc')}</p>
</ListInfo>
</ListItem>
</Link>
然后把 src/App.js 中路由的设置也改过来,如下。
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { GlobalStyle } from './style.js';
import Header from './common/header';
import store from './store/index';
import Home from './pages/home';
import Detail from './pages/detail';
class App extends Component {
render() {
return (
<div>
<GlobalStyle />
<Provider store={store}>
<div>
<BrowserRouter>
<Header />
<Route path='/' exact component={Home}></Route>
<Route path='/detail' exact component={Detail}></Route>
</BrowserRouter>
</div>
</Provider>
</div>
);
}
}
export default App;
但这个时候,在详情页面,获得id 就不是在match.id 中了。我们在详情页面,打印一下this.props 如下。这个时候就要在location.search 中解析了。
有一些麻烦。
推荐第一种动态路由的方式。