在React Router中查询参数

时间:2016-09-23 06:10:59

标签: javascript reactjs react-router react-router-redux

我正在使用React Router&我有一个嵌套路由,其中​​有一个名为?q&的查询参数。我的路由代码如下所示:

<Route path="/" component={TopNavContainer}>
    <Route path="search?que=:q" component={SearchContainer} />
</Route>

但是当我尝试以http://localhost:8000?q=machine的身份访问我的路线时 它只加载父容器的内容TopNavContainer

感谢任何帮助。

此致 Vaibhav的

2 个答案:

答案 0 :(得分:1)

也可能是您忘记渲染与父主要组件内的路由更改相对应的任何子组件,在您的情况下为TopNavContainer

import React, { Component } from 'react';

export default class TopNavContainer extends Component {

    render() {
        return (
            <div className="topNavContainer">
                {this.props.children}
            </div>
        );
    }
}

答案 1 :(得分:0)

对于此路线配置

<Route path="/" component={TopNavContainer}>
    <Route path="search?que=:q" component={SearchContainer} />
</Route>

您的网址(http://localhost:8000?q=machine)与路径不匹配,正确应为http://localhost:8000/search?que=machine

作为SEO的推荐,网址可能是

<Route path="search/:q" component={SearchContainer} />

匹配http://localhost:8000/search/machine