React Router 中的查询参数

Question

我正在使用React Router & 我有一个嵌套路由，它有一个名为?q的查询参数 & 我的路由代码如下所示：

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

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

任何帮助表示赞赏。

问候 Vaibhav

Answer 1

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

import React, { Component } from 'react';

export default class TopNavContainer extends Component {

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

Answer 2

对于此路由配置

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

您的 url ( http://localhost:8000?q=machine ) 与路径不匹配，正确的应该是http://localhost:8000/search?que=machine

作为对 SEO 的建议，网址可能是

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

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