tmp-react-router v1.0.5

tmp-react-router

Как использовать

config

Config задает список роутов и алиасы для них. Также вам понадобится экземпляр history.

import { createBrowserHistory } from 'history';
import { RouterConfig } from 'tmp-react-router';

const history = createBrowserHistory();

const config: RouterConfig = {
    routes: {
        PAGE1: '/p1/:login',
        PAGE2: '/p2'
    }
};

middleware

import { createRoutingMiddleware } from 'tmp-react-router';
// ...
const routerMiddleware = createRoutingMiddleware(routerConfig, history);
// ...
const store = createStore(rootReducer, routerMiddleware);

Теперь при каждом изменении url будет генериироваться action, который вы можете обрабатывать любым нужным способом. В него приходит информация о новом URL и его параметрах + его alias в конфиге.

reducer + state

Вы можете подключить готовый редюсер, который будет обрабатывать события изменения URL и класть информацию в state. Также он отвечает за начальное состояние (начальный url).

import { RouterLocation, createRoutingReducer } from 'tmp-react-router';

export interface State {
    location: RouterLocation;
    // ...
}

const rootReducer = combineReducers({
    location: createRoutingReducer(
        config,  // конфиг роутера
        history.location // начальный url
    ),
    // ...
});

Ссылки

Генерация ссылок по ключам

Внимание! проверьте, что нет лишних перерисовок

Base path

Везде работаем с относительными путями.

• Для адресной строки — указать basename в createBrowserHistory.
• Для генерации ссылок — пробросить basename через контекст.

Достоинства

• плоский список роутов
• парсит ключи и параметры - не нужны спец. компоненты для условного рендеринга
• не нужна генерация действий в componentDidMount
• можно использовать с react-router, а можно и не использовать)

todo

• отписка от событий history
• exact

cases

• SSR
• рендеринг адресов в ссылках, включая basename

Подумать

• импорт компонента ссылки из корня
• устанавливать начальный path
• location по умолчанию
• редюсер
• генерация ссылок по ключу????? (откуда брать конфиг? как вариант, можно коннектить каждую ссылку к стору и складывать конфиг в стор конфиг передается через контекст)
• синхронизация в обратную сторону?