在我的 react 应用程序中,我有一些用户进入应用程序的参数,这些参数提供了有关他们来自何处的一些信息。有没有办法使用react-router在整个应用程序中保留这些查询参数。意味着每次更改路线时,我都希望这些查询参数保留在网址中。我见过的唯一例子是在路由之间传递查询参数,但没有为每个路由保留它们。
最佳答案
更新
Solution for react-router v4可用。
react-router v3 的解决方案:
我写了这个小history Typescript 中的 v3(与 react-router v3 兼容)增强器。它将保留给定的一组查询参数。请小心 - 传递给此函数的历史记录必须使用 useQueries 进行增强.
import {History, Location, LocationDescriptor} from 'history'
export default function preserveQueryHistory(history: History, queryParameters: string[]): History {
function preserveQueryParameters(path: LocationDescriptor): Location {
const location = history.createLocation(path)
const currentQuery = history.getCurrentLocation().query
for (let p of queryParameters) {
const v = (currentQuery as any)[p]
if (v) {
location.query[p] = v
}
}
return location
}
return {
...history,
push(path: LocationDescriptor) {
history.push(preserveQueryParameters(path))
},
replace(path: LocationDescriptor) {
history.replace(preserveQueryParameters(path))
}
}
}
现在用它来创造历史:
import useQueries from 'history/lib/useQueries'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import preserveQueryHistory from './preserveQueryHistory'
const history = preserveQueryHistory(useQueries(createBrowserHistory)(), ['language'])
在 react 路由器中:
<Router history={history}>
...
</Router>
更多终极解决方案,具有 CreateHistory
增强器功能,该功能嵌入应用 useQueries
增强器,并提供注入(inject)自定义 History
的能力增强剂:
import {CreateHistory, History, HistoryOptions, HistoryQueries, Location, LocationDescriptor} from 'history'
import useQueries from 'history/lib/useQueries'
function preserveQueryParameters(history: History, queryParameters: string[], path: LocationDescriptor): Location {
const location = history.createLocation(path)
const currentQuery = history.getCurrentLocation().query
for (let p of queryParameters) {
const v = (currentQuery as any)[p]
if (v) {
location.query[p] = v
}
}
return location
}
function enhanceHistory<H>(history: History & H, queryParameters: string[]): History & H {
return Object.assign({}, history, {
push(path: LocationDescriptor) {
history.push(preserveQueryParameters(history, queryParameters, path))
},
replace(path: LocationDescriptor) {
history.replace(preserveQueryParameters(history, queryParameters, path))
}
})
}
export function createPreserveQueryHistoryWithEnhancer<O, H, H2>(createHistory: CreateHistory<O, H>,
queryParameters: string[], enhancer: (h: History) => History & H2): CreateHistory<O, H & H2 & HistoryQueries> {
return function (options?: HistoryOptions & O): History & H & H2 & HistoryQueries {
let h = enhancer(useQueries(createHistory)(options)) as History & H & H2 & HistoryQueries
return enhanceHistory<H & H2 & HistoryQueries>(h, queryParameters)
}
}
export function createPreserveQueryHistory<O, H>(createHistory: CreateHistory<O, H>,
queryParameters: string[]): CreateHistory<O, H & HistoryQueries> {
return createPreserveQueryHistoryWithEnhancer<O, H, {}>(createHistory, queryParameters, h => h)
}
export function preserveQueryHistoryWithEnhancer<H, H2>(history: History & H, queryParameters: string[],
enhancer: (h: History) => History & H2): History & HistoryQueries & H & H2 {
return createPreserveQueryHistoryWithEnhancer(
function () {
return history
},
queryParameters, enhancer)()
}
export function preserveQueryHistory<H>(history: History & H, queryParameters: string[]): History & HistoryQueries & H {
return preserveQueryHistoryWithEnhancer<H, {}>(history, queryParameters, h => h)
}
使用syncHistoryWithStore react-router-redux v4 历史
增强器:
import createBrowserHistory from 'history/lib/createBrowserHistory'
import {createPreserveQueryHistoryWithEnhancer} from './preserveQueryHistory'
import {syncHistoryWithStore} from 'react-router-redux'
const store = ...
const history = createPreserveQueryHistoryWithEnhancer(createBrowserHistory, ['language'], function (h: History) {
return syncHistoryWithStore(h, store)
})()
关于reactjs - 在react-router中保留查询参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35829702/