Маршрутизация в большом приложении на react · 2019-06-20 ·...
Post on 04-Jun-2020
11 Views
Preview:
TRANSCRIPT
Маршрутизация в большом приложении на React
Шабанов Борис (RamblerGroup)
+1
Шабанов Борис
Руководитель отдела интерфейсов департамента разработки рекламных технологий, RamblerGroup
+2
SSP DMP DSP …
+3
+4
+5
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
https://router5.js.org/+7
≠react-router@4 router5@7
+8
React-router vs Router5
+9
+10
Интеграция
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
Подключение
HooksRender propsHOC
+12
Дерево маршрутов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
Отображение
root node
home admin
admin.roles admin.users
+14
// 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
root node
home admin
admin.roles admin.users
ПереходcanDeactivate // home
1
homecanActivate // admin2 admin
canActivate // admin.user3
admin.users
+16
Middlewares
•Подгрузка компонентов • I18n • Prefetch данных •Ролевая система •Аналитика
+17
Пример 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
Загрузка приложения
+19
+20
+21
Переход в router5
+22
Переход в router5
+23
+24
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
Построение путей
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
Decode и encode параметров
export default { name: 'help', path: ‘/help*slugs',
loadComponent: () => import('./index'),
encodeParams: ({ slugs }) => slugs.join('/'), decodeParams: ({ slugs }) => slugs.split('/'),
defaultParams: { slugs: [], }, };
+27
+28
Спасибо за внимание!
https://goo.gl/3LPfsf+29
top related