Скачать или смотреть React Tutorial - 20.react router

1.react-router(manipulate window.history property to navi component)
a.web - react-router-dom /native /anywhere
b.what is routes, ports on the router, router manage ports, front end router manage components
c.component change:click router to trigger path change, monitored by front end router and match component
d.a jump page, Link switch components -- write route link
e.handle routes
f.manage all route component within identical router(BrowserRouterApp//BrowserRouter/)

2.prettify Link
a.use navi link to highlight your link component
aa.active + bootstrap
bb.activeClassName + !important
b.encapsulate your own navi link
aa.to
bb.children

3.difference between route compo and regular
a.syntax difference:
aa.regular compo Demo/
bb.route component Route path='/demo' component={demo} /
b.file location:
aa.regular compo components folder
bb.route compo pages folder
c.props
aa.regular compo : accept whatever you pass into
bb.route compo: accept three important props automatically:location/history/match
aaa.history: go/goBack/goForward/push/replace
bbb.location:pathname/search/state
ccc.match:isExact/params:{ }/path:"/about/url:"/about"

4.switch
a.add /home map to new test component -- as long as it match, display all matched components
aa.should not be, because, you can combine them all
bb.if you have many components, match everyone will cause performance issue
b.wrap your routes registered, only match first route

5.react-router not loading css for nested pages on refresh
a."./css/bootstrap" -- "/css/boostrap" remove dot operator means request from localhost:3000
b.href="%PUBLICK%/css/bootstrap"
c.BrowserRouter - HashRouter the path after # is recognized as front end resource which won't require -- rarely used

6.exact match or fuzzy match
a.Link /home - Route /home/a/b/ (match)
b.Link /home/a/b/c - Route /home (no match)
c.Link /a/home/b/c - Route /home (no match)
d.fuzzy match in default, input path must match path as exact same order
e.exact mode Route exact={ true } path='/about' component={ About } /
f.do use exact unless you need to, sometime will casue problem of second level route

7.default loaded component - redirect
a.Redirect to='/home' /
b.write at the end of all routes