react-router-dom.md

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

• https://github.com/rogerwschmidt/react-router-no-api
• https://github.com/rogerwschmidt/react-router-passing-data

How do you add routing between 2 pages?

1. Install package

npm install react-router-dom

2. Add BrowserRouter in App.js

import { BrowserRouter } form 'react-router-dom

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

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

4. 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

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

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

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

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

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

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

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

9. What error appears? How would you fix it?

10. Import Switch from react-router-dom

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

11. 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.

12. 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'?

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

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

1. 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?

1. 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>

1. 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

1. 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?

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

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

2. Create a route or /new using component AddPost

• How do you pass this.addPost to AddPost

1. 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?