react router在搜索模块中的应用

Question

问题相关：React-Router,Link
构建工具：Webpack

由于项目赶紧，可能过于快速查看api，没有发现Link组件中query为多个键值的例子，只是简单介绍了一下。可能直观上我描述的问题很烂，所以直接给出需求，希望各位看官给个思路和指出我是否有用错。

⚠注意：我用的是 React-Router v1.0.2 版本

不废话了，开始

需求：

例如，现在我的组件结构为以下简图图示：

• search

  • 分类

      - 前端
      - 后台

  • 时间

      - 一个月内
      - 半年内
    

当前我的URL：...(忽略)/search

组件的JSX

<ul>
    <li>
        <Link to={`search`} query={{categories: ‘前端’}}>前端</Link>
        <Link to={`search`} query={{categories: ‘后台’}}>后台</Link>
    </li>
    
    <li>
        <Link to={`search`} query={{time: ‘一个月内’}}>一个月内</Link>
        <Link to={`search`} query={{time: ‘半年内’}}>半年内</Link>
    </li>
</ul>

结构可能很烂，但是为了减少代码量所以将就下。

路由:

module.exports = {
    path: 'search',
    getComponent: function(location, cb) {
        require.ensure([], function(require) {
            // data fetching here...

            cb(null, require('../components/Search.js'));
        });
    }
};

现在回到简图，为了方便，我重新粘贴一次

• search

  • 分类

      - 前端
      - 后台

  • 时间

      - 一个月内
      - 半年内
    

1. 我希望点击了前端，我的URL变成.../search?category=前端

2. 同一，我点击了一个月内，我的URL变成.../search?time=一个月内

3. 先点击前端,URL变化为.../search?category=前端，再点击一个月内，URL变化为.../search?category=前端&time=一个月内

4. 在3的基础上，如果我再点击后台,那么URL变成.../search?category=后台&time=一个月内(希望你注意到URL的变化...)。

方案

期待你的回复！不胜感激

解决方案

特别多谢charleyw的建议和帮助。

query={Object.assign({}, this.props.location.query, {time: '半年内'})}

Answer 1

全都改成这样应该就行了把，把当前Link的query条件和页面现有的query merge一下。这里用的Object.assign merge的。

<Link to={`search`} query={Object.assign(this.props.location.query, {time: ‘半年内’})}>半年内</Link>