UPDATE
Solution for react-router v4 is available.
Solution for react-router v3:
I wrote this little history v3 (it's compatible with react-router v3) enhancer in Typescript. It will preserve given set of query parameters. Be careful - history passed to this function has to be enhanced with 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))
}
}
}
Now use it to create history:
import useQueries from 'history/lib/useQueries'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import preserveQueryHistory from './preserveQueryHistory'
const history = preserveQueryHistory(useQueries(createBrowserHistory)(), ['language'])
And in react-router:
<Router history={history}>
...
</Router>
More ultimate solution with CreateHistory
enhancer function that embeds applying useQueries
enhancer and provides ability to inject custom History
enhancer:
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)
}
Usage with syncHistoryWithStore react-router-redux v4 History
enhancer:
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)
})()