Routing Notes
*gibberish notes on routing
Routing - React is just a UI library - Angular comes with routing (framework) - Before SPA had a problem with back button (url did not change) - Browser has History API - SPA routing libraries use history API to mimic Browser What is routing - if page had more than one page that has to be rendered - React Router Dom React Router Dom - npm install react-router-dom - import { BrowserRouter } from 'react-router-dom' in index.js - import { Route } from 'react-router-dom' in App.js - < Route > arguments: exact path component - component: component you want to render (HomePage) - path: path of the url ('/' is the homepage) - exact: true or false exact path if true www.hoge.com/ or www.hoge.com/hats will only render one if homepage is false www.hoge.com/hats will render both - < Switch > will only render one that matches if exact is false www.hoge.com/hats will render www.hoge.com/ and nothing else - any component that is gets rendered by < Route > gets passed 3 arguments ・history ・location ・match - match has 4 props url -> url of the component it got rendered (url up to where it matched ) path -> path of the component isExact -> true if all the url is the same (www.hoge.com is false for www.hoge.com/topics even if its rendered) params -> object of parameters (:topicId) www.hoge.com/topics/:topicId -> www.hoge.com/topics/12 - History - { Link } from 'react-router-dom' - <Link to='/topics'> Topics </ Topics> will render a link to topics - <button onClick={ () => props.history.push('/topics')}>Topics</ button> - Location - tells us where we are - pathName: full path name of where we are - Prevent Prop Tunneling - { withRouter } from 'react-router-dom' - export default withRouter(MenuItem) -