Question

说我http://www.example.com/page/#/search像这样路过：

<Router history={hashHistory}>
  <Route path='/search/' component={SearchPage} />
</Router>

当用户使用提供的name和age搜索框在页面上搜索时（可以省略，或者两者都可以填充），我希望它重定向到：

http://www.example.com/page/#/search/?name=whatever%20name&age=15

这将显示此特定搜索的结果。这也可以直接链接到搜索结果。

现在在我的SearchPage组件中，如何检查是否提供了?name=或?age=或任何其他搜索参数？

Answer 1

在您的容器中说SearchPage，您可以像这样访问queryParams

this.props.location.query.yourKey。

作为一个例子

class SearchPage extends React.Component{
   componentWillMount(){
     const {name, age} = this.props.location.query;
     //here you can give default values if they are empty
     //do whatever you want
   }
}

Answer 2

实现此目的有两种方法，您可以使用参数或查询值。

以params：

在路线中首先定义您的可选参数，如下所示：

<Router history={hashHistory}>
   <Route path='/search(/:name)(/:age)' component={SearchPage} />
</Router>

在您的组件中包含componentWillReceiveProps()方法，只要组件收到任何新道具，它就会被触发，如下所示：

componentWillReceiveProps(newProps){
   console.log(newProps.params.name, newProps.params.age);
   // here you can check the props value
}

在组件中，您可以通过this.props.params.name或age检查值。

通过查询参数：

路由中不需要更改，只需传递url中的值并检查如下：

this.props.location.name or age.

阅读本文，了解有关反应中的参数和查询值：https://www.themarketingtechnologist.co/react-router-an-introduction/

Answer 3

由于没有公开最新的更新“ location.query”，我们必须使用“ location.search”来获取可选的未命名参数。但是，仍可以通过“ props.match.params”读取命名的可选参数

路线：

<Route path="/partner/list-space/step-1/:_id?" component={ListSpace}/>

在组件或挂钩中获取命名的可选参数“ id”

let id = props.match.params._id;

要从网址中获取未命名的可选参数，例如“ space”。

http://localhost:3000/partner/list-space/step-1/123?space=new&guests=4

我们必须使用“ querystringify”。

import qs from "querystringify";

const qsParams = qs.parse(props.location.search);

结果：

props.match.params._id => "123" 
qsParams.space => new 
qsParams.guests => 4

在反应路由器

3 个答案: