/tmp-react-router

Primary LanguageTypeScript

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 по умолчанию
  • редюсер
  • генерация ссылок по ключу????? (откуда брать конфиг? как вариант, можно коннектить каждую ссылку к стору и складывать конфиг в стор конфиг передается через контекст)
  • синхронизация в обратную сторону?