3-4 页面路由参数的传递

我们希望，点击每一个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 中解析了。

有一些麻烦。

推荐第一种动态路由的方式。