用户登录后重定向到我的应用程序（Java 上的服务器），他们有 url，看起来像这样 http://10.8.0.29:8083/html/?locale=RU&token=1c5c71f2-dcda-4a51-8cf6-f8f6ff1031d0&returnTo=http ://10.8.0.23:8080/
（带有一些参数，html - 是源所在的文件夹）。在我的应用程序上导航时，我需要保留这些参数。到目前为止，除了如何在保留初始查询参数的同时使用 react-router 重定向？老问题，所以我再次提出这个问题，希望如此。提前致谢。
我已经在对您的问题的评论中分享了我的 react-router v3解决方案。
以下是我对 react-router v4 的解决方案。
使用以下createPreserveQueryHistory函数来覆盖history.push和history.replace方法，以便它们保留指定的查询参数：
import queryString from 'query-string';
import {createBrowserHistory} from 'history'
function preserveQueryParameters(history, preserve, location) {
const currentQuery = queryString.parse(history.location.search);
if (currentQuery) {
const preservedQuery = {};
for (let p of preserve) {
const v = currentQuery[p];
if (v) {
preservedQuery[p] = v;
}
}
if (location.search) {
Object.assign(preservedQuery, queryString.parse(location.search));
}
location.search = queryString.stringify(preservedQuery);
}
return location;
}
function createLocationDescriptorObject(location, state) {
return typeof location === 'string' ? { pathname: location, state } : location;
}
function createPreserveQueryHistory(createHistory, queryParameters) {
return (options) => {
const history = createHistory(options);
const oldPush = history.push, oldReplace = history.replace;
history.push = (path, state) => oldPush.apply(history, [preserveQueryParameters(history, queryParameters, createLocationDescriptorObject(path, state))]);
history.replace = (path, state) => oldReplace.apply(history, [preserveQueryParameters(history, queryParameters, createLocationDescriptorObject(path, state))]);
return history;
};
}
const history = createPreserveQueryHistory(createBrowserHistory, ['locale', 'token', 'returnTo'])();
然后在路由器定义中使用它：
<Router history={history}>
...
</Router>
对于那些使用 TypeScript 的人：
import {History, LocationDescriptor, LocationDescriptorObject} from 'history'
import queryString from 'query-string'
import LocationState = History.LocationState
type CreateHistory<O, H> = (options?: O) => History & H
function preserveQueryParameters(history: History, preserve: string[], location: LocationDescriptorObject): LocationDescriptorObject {
const currentQuery = queryString.parse(history.location.search)
if (currentQuery) {
const preservedQuery: { [key: string]: unknown } = {}
for (let p of preserve) {
const v = currentQuery[p]
if (v) {
preservedQuery[p] = v
}
}
if (location.search) {
Object.assign(preservedQuery, queryString.parse(location.search))
}
location.search = queryString.stringify(preservedQuery)
}
return location
}
function createLocationDescriptorObject(location: LocationDescriptor, state?: LocationState): LocationDescriptorObject {
return typeof location === 'string' ? {pathname: location, state} : location
}
export function createPreserveQueryHistory<O, H>(createHistory: CreateHistory<O, H>,
queryParameters: string[]): CreateHistory<O, H> {
return (options?: O) => {
const history = createHistory(options)
const oldPush = history.push, oldReplace = history.replace
history.push = (path: LocationDescriptor, state?: LocationState) =>
oldPush.apply(history, [preserveQueryParameters(history, queryParameters, createLocationDescriptorObject(path, state))])
history.replace = (path: LocationDescriptor, state?: LocationState) =>
oldReplace.apply(history, [preserveQueryParameters(history, queryParameters, createLocationDescriptorObject(path, state))])
return history
}
}
在 React-Router 4.3（不确定早期版本）中，如果你有一个<Route>上面的，这样的东西应该可以工作：（这是在typescript中）
Route({ path: ..., render: (props) => function() {
Redirect({ ...,
to: { pathname: ... search: props.location.search, ... }})
});
说明：您使用标签的render: (props) => ....属性<Route>，而不是component: ...，因为render给了您props，因此<Redirect>您可以props.location.search在其中使用并以这种方式访问当前查询参数，并在重定向中重用。
如果没有<Route>以上，也许你不能。我只是在这里问：如何在 React-Router 4 <Switch><Redirect> 中保留查询字符串和哈希片段？
我在这个项目中关闭了哈希路由器，它保留了路由中的所有参数。
如果您需要#anchor的链接，一种选择是使用此库 https://github.com/rafrex/react-router-hash-link并执行以下操作：
import { NavHashLink } from 'react-router-hash-link';
...
<NavHashLink elementId='targetID' to='' smooth >
my text
</NavHashLink>
...
这也适用于 React-Router v5。