1. params

  • 路由链接(携带参数)

    <Link to="/demo/test/tom/18">详情</Link>

1
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
  • 注册路由(声明接收)

    <Route path="/demo/test/:name/:age" component={Test} />

1
<Route path="/home/message/detail" component={Detail} />
  • 接收参数

    this.props.match.params

1
const { id, title } = this.props.match.params;

2. search

  • 路由链接(携带参数)

    <Link to="/demo/test?name=tom&age=18">详情</Link>

1
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
  • 注册路由(无需声明,正常注册即可)

    <Route path="/demo/test" component={Test} />

1
<Route path="/home/message/detail" component={Detail} />
  • 接收参数

    this.props.location.search

    获取到的searchurlencoded编码字符串,需要借助querystring解析

1
2
3
import qs from 'querystring';
const { search } = this.props.location;
const { id, title } = qs.parse(search.slice(1));

3. state

  • 路由链接(携带参数)

    <Link to={{ pathname: '/demo/test', state: { name: 'tom', age: 18 } }}>详情</Link>

1
<Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>
  • 注册路由(无需声明,正常注册即可)

    <Route path="/demo/test" component={Test} />

1
<Route path="/home/message/detail" component={Detail} />
  • 接收参数

    this.props.location.state

1
const { id, title } = this.props.location.state || {};