Config задает список роутов и алиасы для них. Также вам понадобится экземпляр history
.
import { createBrowserHistory } from 'history';
import { RouterConfig } from 'tmp-react-router';
const history = createBrowserHistory();
const config: RouterConfig = {
routes: {
PAGE1: '/p1/:login',
PAGE2: '/p2'
}
};
import { createRoutingMiddleware } from 'tmp-react-router';
// ...
const routerMiddleware = createRoutingMiddleware(routerConfig, history);
// ...
const store = createStore(rootReducer, routerMiddleware);
Теперь при каждом изменении url будет генериироваться action, который вы можете обрабатывать любым нужным способом. В него приходит информация о новом URL и его параметрах + его alias в конфиге.
Вы можете подключить готовый редюсер, который будет обрабатывать события изменения URL и класть информацию в state. Также он отвечает за начальное состояние (начальный url).
import { RouterLocation, createRoutingReducer } from 'tmp-react-router';
export interface State {
location: RouterLocation;
// ...
}
const rootReducer = combineReducers({
location: createRoutingReducer(
config, // конфиг роутера
history.location // начальный url
),
// ...
});
Внимание! проверьте, что нет лишних перерисовок
Везде работаем с относительными путями.
- Для адресной строки — указать
basename
вcreateBrowserHistory
. - Для генерации ссылок — пробросить
basename
через контекст.
- плоский список роутов
- парсит ключи и параметры - не нужны спец. компоненты для условного рендеринга
- не нужна генерация действий в componentDidMount
- можно использовать с react-router, а можно и не использовать)
- отписка от событий history
- exact
- SSR
- рендеринг адресов в ссылках, включая basename
- импорт компонента ссылки из корня
- устанавливать начальный path
- location по умолчанию
- редюсер
- генерация ссылок по ключу????? (
откуда брать конфиг? как вариант, можно коннектить каждую ссылку к стору и складывать конфиг в сторконфиг передается через контекст) - синхронизация в обратную сторону?