我似乎无法找到如何使用 react-router 更新查询参数而不使用<Link/>. hashHistory.push(url)似乎没有注册查询参数，而且您似乎不能将查询对象或任何东西作为第二个参数传递。
如何从更改URL /shop/Clothes/dresses，以/shop/Clothes/dresses?color=blue在react-router没有使用<Link>？
而且是一个onChange真正的函数来监听查询变化的唯一途径？为什么不自动检测查询更改并对参数更改的方式做出react？
在push方法中hashHistory，您可以指定查询参数。例如，
history.push({
pathname: '/dresses',
search: '?color=blue'
})
或者
history.push('/dresses?color=blue')
您可以查看此存储库以获取有关使用的其他示例history
使用 react-router v4、redux-thunk 和 react-router-redux(5.0.0-alpha.6) 包的示例。
当用户使用搜索功能时，我希望他能够将相同查询的 url 链接发送给同事。
import { push } from 'react-router-redux';
import qs from 'query-string';
export const search = () => (dispatch) => {
const query = { firstName: 'John', lastName: 'Doe' };
//API call to retrieve records
//...
const searchString = qs.stringify(query);
dispatch(push({
search: searchString
}))
}
约翰的回答是正确的。当我处理参数时，我还需要URLSearchParams接口：
this.props.history.push({
pathname: '/client',
search: "?" + new URLSearchParams({clientId: clientId}).toString()
})
您可能还需要使用withRouterHOC包装您的组件，例如。export default withRouter(YourComponent);.
您可以使用替换功能而不是在每次更改时推送新路由
import React from 'react';
import { useHistory, useLocation } from 'react-router';
const MyComponent = ()=>{
const history = useHistory();
const location = useLocation();
const onChange=(event)=>{
const {name, value} = event?.target;
const params = new URLSearchParams({[name]: value });
history.replace({ pathname: location.pathname, search: params.toString() });
}
return <input name="search" onChange={onChange} />
}
这会保留历史记录，而不是在每次更改时都推一条新路径
for react-router v4.3,
const addQuery = (key, value) => {
let pathname = props.location.pathname;
// returns path: '/app/books'
let searchParams = new URLSearchParams(props.location.search);
// returns the existing query string: '?type=fiction&author=fahid'
searchParams.set(key, value);
this.props.history.push({
pathname: pathname,
search: searchParams.toString()
});
};
const removeQuery = (key) => {
let pathname = props.location.pathname;
// returns path: '/app/books'
let searchParams = new URLSearchParams(props.location.search);
// returns the existing query string: '?type=fiction&author=fahid'
searchParams.delete(key);
this.props.history.push({
pathname: pathname,
search: searchParams.toString()
});
};
```
```
function SomeComponent({ location }) {
return <div>
<button onClick={ () => addQuery('book', 'react')}>search react books</button>
<button onClick={ () => removeQuery('book')}>remove search</button>
</div>;
}
```
// To know more on URLSearchParams from
[Mozilla:][1]
var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.
for (let p of searchParams) {
console.log(p);
}
searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
[1]: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams