React Router Instructor Notes

Objectives

Add Routing between 2 pages to react
Use Link to change urls
Access values from the url to a url and pass it to a component
Pass data to route components
Manage page travesal programatically
Use <Redirect /> to move from route to route
Explain how using redux changes the architecture of a react project that uses routes

Resources

How do you add routing between 2 pages?

Install package

npm install react-router-dom

Add BrowserRouter in App.js

import { BrowserRouter } form 'react-router-dom

Add <BrowserRouter></BrowserRouter> to App.js

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          
        </BrowserRouter>
      </div>
    )
  }
}

Create a new functional component to use as a 'Home' route

import React from 'react'

const Home = props => 
  <div>
    <h1>Welcome To the homepage</h1>
  </div>

export default Home

Import the Route component from 'react-router-dom`

import { BrowserRouter, Route } from 'react-router-dom'

Add routes inside the <BrowserRouter> component (make sure import Home)

<Route path="/" component={Home}/>

Create a new functional component to use as a 'Page' route

import React from 'react'

const Page = props => 
  <div>
    <h1>Welcome To the page</h1>
  </div>

export default Page

Add route inside the <BrowserRouter> component (make sure import Page)

<Route path="/" component={Page}/>

What error appears? How would you fix it?
Import Switch from react-router-dom

import { BrowserRouter, Route, Switch } from 'react-router-dom'

Add Switch as the only child of BrowserRouter

<BrowserRouter>
  <Switch>
    <Route path="/" component={Home}/>
    <Route path="/page" component={Page} />
  </Switch>
</BrowserRouter>

Switch will only display the the first route where the path matches the url. W ith out Switch, it will display all the routes that match.

Change the url to /page. Does anything change? What do you think is happening?

When the url is getting is getting matched, it's very optimistic. It'll match if any part of the path matches. In this case, it is matching / of /page to the / route, and because it is in a Switch it only shows the first one that matches.

In order to prevent eager matching, there are 2 solutions

Order routes in such a way that eager matching helps, more complex to less complex
Add the prop exact to each route.

How do you use `Link` to change urls'?

Add a Link from / to /page In Home.js import Link from react-router-dom

import { Link } from 'react-router-dom'

Add the link component to the JSX

<Link to="/page">Page</Link>

How do you access values from the url to and pass it to a component?

Add a new route that contains a wildcard in the path

 <BrowserRouter>
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route exact path="/page" component={Page} />
    <Route exact path="/page/:id" component={SpecificPage} />  // <- add this
  </Switch>
</BrowserRouter>

Create a new functional component name SpecificPage.js, make sure to import in App.js

import React from 'react'

const SpecificPage = props => {
  
  console.log(props)
  
  return (
    <div>
      Specific page {props.match.params.id}
    </div>
  )
}

export default SpecificPage

Go the the url /page/3. What do you see?

When a component is rendered using <Route/>, it is given information about how it was routed. Any wildcards in the url will be found in the match key of props.

How do you pass data to components in routes?

In App.js import and add BrowserRouter and Switch
Comment out all AddPost and ViewPost
Create a route for / using component ViewPosts

How do you pass this.state.posts to ViewPosts
Why do you need to pass props down?

Create a route or /new using component AddPost

How do you pass this.addPost to AddPost

Create a route for /:postId using Component

Create a method on App.js named this.getPost that receives and id, and returns the post by that id
How do you pass this.getPost to ViewPost

How do you manage page traversal programatically?

After a new post has been added, return to the main page
Where does history method come from?

How do you use `<Redirect />` to move from route to route?

In ViewPost, redirect back the / if the postId does not match with a post.id

How does redux affect the architecture of a react application that uses routes?

In groups of 2
- One person open up the with-router branch
- One person open up the with-redux branch
Compare and contrast the changes
- Why is data and actions not being passed down on the routes?
- What happens when a new post is added?
- Why is history.push in a callback that is passed to the addPost actions?

rogerwschmidt/react-router-dom.md