Слияние кода завершено, страница обновится автоматически
Шаг 1: Базовая маршрутизация
В своей простейшей форме маршрутизация выглядит как набор URL-адресов, где каждый URL сопоставляется с компонентом React:
// app.js
import React from 'react';
import Layout from './components/Layout';
import HomePage from './components/HomePage';
import AboutPage from './components/AboutPage';
import NotFoundPage from './components/NotFoundPage';
import ErrorPage from './components/ErrorPage';
const routes = {
'/': <Layout><HomePage /></Layout>,
'/about': <Layout><AboutPage /></Layout>
};
const container = document.getElementById('app');
function render() {
try {
const path = window.location.hash.substr(1) || '/';
const component = routes[path] || <NotFoundPage />;
React.render(component, container);
} catch (err) {
React.render(<ErrorPage {...err} />, container);
}
}
window.addEventListener('hashchange', () => render());
render();
Шаг 2: Асинхронные маршруты
Просто оберните компоненты React внутри ваших маршрутов в асинхронные функции:
import React from 'react';
import http from './core/http';
import Layout from './components/Layout';
import HomePage from './components/HomePage';
import AboutPage from './components/AboutPage';
import NotFoundPage from './components/NotFoundPage';
import ErrorPage from './components/ErrorPage';
const routes = {
'/': async () => {
const data = await http.get('/api/data/home');
return <Layout><HomePage {...data} /></Layout>
},
'/about': async () => {
const data = await http.get('/api/data/about');
return <Layout><AboutPage {...data} /></Layout>;
}
};
const container = document.getElementById('app');
async function render() {
try {
const path = window.language.location.hash.substr(1) || '/';
const route = routes[path];
const component = route ? await route() : <NotFoundPage />;
React.render(component, container);
} catch (err) {
React.render(<ErrorPage {...err} />, container);
}
}
window.addEventListener('hashchange', () => render());
render();
Шаг 3: Параметризованные маршруты
(1) Преобразуйте список маршрутов из хеш-таблицы в массив, таким образом порядок маршрутов будет сохранён. (2) Оберните эту коллекцию в класс Router, где вы можете поместить метод .match(url) async. (3) Используйте path-to-regexp, чтобы преобразовать строки пути Express-like в регулярные выражения, которые используются для сопоставления URL-путей с компонентами React.
import React from 'react';
import Router from 'react-routing/src/Router';
import http from './core/http';
import Layout from './components/Layout';
import ProductListing from './components/ProductListing';
import ProductInfo from './components/ProductInfo';
import NotFoundPage from './components/NotFoundPage';
import ErrorPage from './components/ErrorPage';
const router = new Router(on => {
on('/products', async () => {
const data = await http.get('/api/products');
return <Layout><ProductListing {...data} /></Layout>
});
on('/products/:id', async (req) => {
const data = await http.get(`/api/products/${req.params.id}`);
return <Layout><ProductInfo {...data} /></Layout>;
});
}]);
const container = document.getElementById('app');
async function render() {
const state = { path: window.location.hash.substr(1) || '/' };
await router.dispatch(state, component => {
React.render(component, container);
});
}
window.addEventListener('hashchange', () => render());
render();
Шаг 4. Обработка перенаправлений
Скоро появится. Оставайтесь с нами. tuned!
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )