栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在react

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在react

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/380412.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号