Question

我正在使用带有hashHistory的React Router 3，我希望我的URL结构使用经典的查询字符串，例如'？'和'＆amp;'参数而不是默认的'/'。

例如我想要这个：

http://example.com/#/search?q=term&category=cat&etc=1

而不是：

http://example.com/#/search/term/cat/1

我使用以下代码：

<Router history={hashHistory}>
    <Route path="/">
        <Route path="/" component={Root} />
        <Route path="/search(/:q)(/:category)" component={SearchContainer} />
    </Route>
</Router>

我已经尝试了<Route path="/search(?:q)(&:category)" component={SearchContainer} />但是我在路由器返回的params对象中收到了未定义的内容。

任何帮助表示赞赏！

Answer 1

您只需要避开路径，然后使用this.props.location.query获取值例如

<Router history={hashHistory}>
    <Route path="/">
        <Route path="/" component={Root} />
        <Route path="/search" component={SearchContainer} />
    </Route>
</Router>

在SearchContainer中：

class SearchContainer extends Component {
    componentDidMount() {
        const q = this.props.location.query; //here you can access the params        
        console.log(q);
    }
}

React Router - 强制查询字符串

1 个答案: