在反应路由器中保留查询参数 [英] Preserve query parameters in react-router

问题描述

在我的 React 应用程序中，我有一些参数供用户访问应用程序，这些参数提供有关它们来自何处的一些信息.有没有办法使用 react-router 在整个应用程序中保留这些查询参数.这意味着每次更改路线时，Id 就像那些查询参数一样保留在 url 中.我见过的唯一例子是在路由之间传递查询参数，但没有为每条路由保留它们.

In my react application I have a few parameters that the user comes to the application that provide some information about where they came from. Is there a way using react-router to preserve these query params throughout the entire application. meaning every time a route is changed Id like those query params to stay in the url. The only examples I've seen are passing query params between routes but not keeping them around for every route.

推荐答案

UPDATE

react-router v4 的解决方案 可用.

react-router v3 的解决方案:

我写了这个小小的 history v3(它与 react-router v3) Typescript 中的增强器.它将保留给定的一组查询参数.小心 - 传递给此函数的历史必须使用 useQueries.

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))
        }
    }
}

现在用它来创建历史:

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 的能力增强器:

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)
}

使用 syncHistoryWithStore react-router-redux v4 History 增强器:

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)
})()

这篇关于在反应路由器中保留查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！