Q2L - Routing
Trecker Tech Talk - React Router
&
Overview
Software
Web
Trecker
Changes
Hacking
Software
Software
Navigation
Routing is the process of selecting a path for traffic in a network..."
Software
Application
provide resources
trigger side effects
Web
Web
Address
URL - uniform resource locator
Web
URL
Web
URL
Text
Web
Environments
Trecker
Trecker
server side rendering
= (Ruby on) RAILS
Progress
Trecker
client side rendering
Progress
Trecker
Progress
client side rendering (composable)
= page.js react-router
Changes
Changes
Summary
Changes
Files
files structure by context
- general
- common
- pages
- redux
Changes
Data
routing state part of UI
Changes
Login
Changes
Errors
catch missing pages
handle invalid results
Changes
Router
relation abstraction (composed, nested)
history encapsulation (mocking, universal)
modular extendable (scrolling)
async processing(hooks, transition)
Hacking
Hacking
Basics
Connect Pages:
Match Definition:
import { Route } from 'react-router'
<Route path='...' component={...} />
import { withRouter } from 'react-router
withRouter(component)Get Router:
import { Link } from 'react-router'
<Link to='...'>{...}</Link>Navigate Action:
import { push as pushHistory } from 'react-router-redux'
<button onClick={() => pushHistory('...')}>Back to ...</button>
Hacking
Exercise
- dashboard for (internal) settings
Inspector for developers
Tasks:
- show and toggle available feature flags
- show exposed environment variables
- enable debugging logs
- highlight production environment