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