urlmapper-router

npm - https://www.npmjs.com/package/@evo/urlmapper-router

React компонент для декларативного использвания urlmapper.

Установка

npm i @evo/urlmapper-router @evo/urlmapper

Пример:

import { BrowserRouter, Route } from 'react-router-dom';
import { UrlMapperRouter} from '@evo/urlmapper-router'
import { UrlMapper, Mapper } from '@evo/urlmapper';

const mapper1 = new UrlMapper({
    typeAlias: /[\w\-]+/,
    companyId: /\d+/,
});

const mapper2 = new UrlMapper({
    typeAlias: /[\w\-]+/,
    page: /\d+/,
});

mapper1.connect('/{typeAlias};c{comapnyId}');
mapper2.connect('/{typeAlias};p{page}.html');

const App = () => (
    <BrowserRouter>
        <UrlMapperRouter defaultComponent={Page404}>
            <Mapper mapper={mapper1} component={Comp1} />
            <Mapper mapper={mapper2} component={Comp2} />
            <Mapper path="/test-path" component={Comp3} />
            <Mapper path="/path-with-params/:params" component={Comp4} />
        </UrlMapperRouter>
    </BrowserRouter>
)

Получение шаблонных параметров из url

Самый простой способ получения параметров - воспользоваться hook-ом:

import React from 'react';
import { useMapper } from '@evo/urlmapper-router';

const Comp1 = () => {
    // params - параметры, полученные из шаблонов
    // query - GET параметры
    // mapper - инстанc UrlMapper-а (можно использовать для генерации урлов см. ниже)
    // mapper только для урлов созданных спомощью const mapper1 = new UrlMapper(...)
    const { params, mapper, query } = useMapper();
    return (
        <div>{urlMapper.params}</div> 
    )
}

Так-же можно воспользоваться контекстом

import React from 'react';
import { UrlMapperContext } from '@evo/urlmapper-router';

const Comp1 = () => {
    const { urlMapper } = React.useContext(UrlMapperContext);
    return (
        <div>{urlMapper.params}</div> 
    )
}

Или HOC

import React from 'react';
import { withMapper } from '@evo/urlmapper-router';

const Comp1 = withMapper(({ params }) => {
    return (
        <div>{params}</div> 
    )
})

Генерация url

import React from 'react';
import { useMapper } from '@evo/urlmapper-router';

const Comp1 = () => {
    const { mapper } = useMapper();
    const newUrl = mapper.url('/services;c123', { companyId: 111 }); // /services;c111
    return (
        <div>{newUrl}</div> 
    )
}

useUrl

import React from 'react';
import { useUrl } from '@evo/urlmapper-router';

const Comp1 = () => {
    const { urlCurrent } = useUrl();
    const newUrl = urlCurrent({ params: { companyId: 111 } }); // /services;c111
    // const newUrl = urlCurrent({ params: { companyId: 111 }, absolute: true }); // https://current.origin.com/services;c111
    // const newUrl = urlCurrent({ skipSearch: true }); // will skip search
    return (
        <div>{newUrl}</div> 
    )
}

urlCurrent(opts)

• opts.params - params to add or modify (GET or template params)
• opts.absolute - generate absolute link
• opts.skipSearch - will omit GET parameters

UrlMapperContext

{
    urlMapper: {
        mapper: <url mapper instance>,
        params: <parsed template params>,
        query: <parsed GET params>,
        match: <regex match result>
    }
}