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)
    -