Маршрутизация в большом приложении на React · 2019-06-20 ·...
Transcript of Маршрутизация в большом приложении на React · 2019-06-20 ·...
![Page 1: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/1.jpg)
Маршрутизация в большом приложении на React
Шабанов Борис (RamblerGroup)
+1
![Page 2: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/2.jpg)
Шабанов Борис
Руководитель отдела интерфейсов департамента разработки рекламных технологий, RamblerGroup
+2
![Page 3: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/3.jpg)
SSP DMP DSP …
+3
![Page 4: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/4.jpg)
+4
![Page 5: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/5.jpg)
+5
![Page 6: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/6.jpg)
import React from "react"; import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const ParamsExample = () => ( <Router> <div> <h2>Accounts</h2> <ul> <li> <Link to="/netflix">Netflix</Link> </li> <li> <Link to="/zillow-group">Zillow Group</Link> </li> <li> <Link to="/yahoo">Yahoo</Link> </li> <li> <Link to="/modus-create">Modus Create</Link> </li> </ul>
<Route path="/:id" component={Child} /> <Route path="/order/:direction" component={ComponentWithRegex} /> </div> </Router> ); +6
![Page 7: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/7.jpg)
https://router5.js.org/+7
![Page 8: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/8.jpg)
≠react-router@4 router5@7
+8
![Page 9: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/9.jpg)
React-router vs Router5
+9
![Page 10: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/10.jpg)
+10
![Page 11: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/11.jpg)
Интеграция
Provided packages
• react-router5 • redux-router5
Community packages
• mobx-router5 • react-mobx-router5 • marko-router5 • Mr. Router5 (MobX+React)
Not up to date
• rxjs-router5 • xstream-router5 • deku-router5 • router5-link-interceptor • router5-boilerplate • universal-react-redux-hapi
+11
![Page 12: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/12.jpg)
Подключение
HooksRender propsHOC
+12
![Page 13: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/13.jpg)
Дерево маршрутовroot node
home admin
admin.roles admin.users
import createRouter from 'router5'; import browserPlugin from ‘router5/plugins/browser';
const routes = [ { name : ‘home' }, { name : 'admin', children : [ { name : ‘roles' }, { name : ‘users’ }, ] }, ];
const options = { defaultRoute: 'home', // ... };
const router = createRouter(routes, options) .usePlugin(browserPlugin());
router.start(); +13
![Page 14: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/14.jpg)
Отображение
root node
home admin
admin.roles admin.users
+14
![Page 15: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/15.jpg)
// app.js
import ReactDOM from 'react-dom' import React from 'react' import App from './App' import { createRouter, RouterProvider } from 'react-router5'
const router = createRouter(routes, options)
router.start(() => { ReactDOM.render(( <RouterProvider router={router}> <App /> </RouterProvider> ), document.getElementById('root')) })
// Main.js
import React from 'react' import { routeNode } from 'react-router5' import { UserView, UserList, NotFound } from './components' function Users(props) { const { previousRoute, route } = props switch (route.name) { case 'users.list': return <UserList /> case 'users.view': return <UserView /> default: return <NotFound /> } } export default routeNode(‘users')(Users)
+15
![Page 16: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/16.jpg)
root node
home admin
admin.roles admin.users
ПереходcanDeactivate // home
1
homecanActivate // admin2 admin
canActivate // admin.user3
admin.users
+16
![Page 17: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/17.jpg)
Middlewares
•Подгрузка компонентов • I18n • Prefetch данных •Ролевая система •Аналитика
+17
![Page 18: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/18.jpg)
Пример middleware
router.canActivate('profile', (router) => (toState, fromState, done) => { return isUserLoggedIn() .catch(() => Promise.reject({ redirect: { name: 'login' }})); });
router.navigate('profile', (err, state) => { // err is null state.name === 'login'; });
+18
![Page 19: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/19.jpg)
Загрузка приложения
+19
![Page 20: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/20.jpg)
+20
![Page 21: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/21.jpg)
+21
![Page 22: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/22.jpg)
Переход в router5
+22
![Page 23: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/23.jpg)
Переход в router5
+23
![Page 24: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/24.jpg)
+24
![Page 25: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/25.jpg)
Link
import React from 'react' import { Link } from 'react-router5' function Menu(props) { return ( <nav> <Link routeName="home">Home</Link> <Link routeName="about">About</Link> <Link routeName="user" routeParams={{ id: 100 }}>User #100</Link> </nav> ) } export default Menu
+25
![Page 26: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/26.jpg)
Построение путей
const router = router5([ { name: 'admin', path: '/admin' }, { name: 'admin.users', path: '~//users?param1' }, { name: 'admin.user', path: '^/user/:id' }, { name: 'help', path: '^/help/*splat' } ]);
console.log(router.buildPath('admin')); // '/admin' console.log(router.buildPath('admin.users'); // '/users' console.log(router.buildPath('admin.users', { param1: true })); // '/users?param1=true' console.log(router.buildPath('admin.users', { id: 100 })); // '/user/100' console.log(router.buildPath('admin.user', { id: 100 })); // '/user/100' console.log(router.buildPath('help', { splat: [1, 2, 3] })); // '/help/1/2/3'
+26
![Page 27: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/27.jpg)
Decode и encode параметров
export default { name: 'help', path: ‘/help*slugs',
loadComponent: () => import('./index'),
encodeParams: ({ slugs }) => slugs.join('/'), decodeParams: ({ slugs }) => slugs.split('/'),
defaultParams: { slugs: [], }, };
+27
![Page 28: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/28.jpg)
+28
![Page 29: Маршрутизация в большом приложении на React · 2019-06-20 · Интеграция Provided packages • react-router5 • redux-router5 Community](https://reader035.fdocuments.in/reader035/viewer/2022070723/5f020d8c7e708231d4025783/html5/thumbnails/29.jpg)
Спасибо за внимание!
https://goo.gl/3LPfsf+29