React-Router v3的解决方案:
我在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'])
在反应路由器中:
<Router history={history}>...</Router>*具有CreateHistory
增强器功能的 *最终解决方案 ,该 解决方案
嵌入了应用
useQueries增强器并提供了注入自定义
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
History增强器配合使用:
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)})()


