The Route component - KatyaHorton/Udacity-React-practice GitHub Wiki

Route component:

• takes the path =>

1. path matches the URL => Route will render some UI
2. path does not match the URL => won't render anything

much like the code we had which was checking which screen we want to render=>

our component state will check the URL =>

the route will do the same, but with checking the URL (that means the back button will work)

1 Import Route component to App.js

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

2

Then we put the Route into the "checking part" (where we initially used screen states to chose what to render)

render(){
 return(
  <div>
//use Route component with the Render prop
   <Route path='/' render={() => (
   <ListContacts 
   contacts={this.state.contacts} 
   onDeleteContact={this.removeContact}
   onNavigate = {() => {
    this.setState({ screen: 'create' })
   }}/>	  
)}/>

//use Route component with the Component prop
   <Route path='/create' 
          component={CreateContact}>
  </div>
)}

Note:

• use Route component with the Render prop when component we want to render has some props passed to it
• use Route component with the Component prop when component we want to render is just a component with no props passed to it

3

To match EXACTLY the path you need:

<Route exact path='/' render={() => (

4

Go ahead and delete screen from state as we do not need it anymore to navigate our app.