# Lesson5-5: React Router: The Route Component
###### tags: `Recat`
{%youtube ocZkC0MqGPY%}
{%youtube Ka19h7gvKi0%}
[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/66dcafce787f673b80622f808ca2dc4236aef0b0)


# Route Component Recap
The main takeaway from this section is that with a `Route` component if you want to be able to pass props to a specific component that the router is going to render, you'll need to use `Route`’s `render` prop. As you saw, `render` puts you in charge of rendering the component which in turn allows you to pass any props to the rendered component as you'd like.

In summary, the `Route` component is a critical piece of building an application with React Router because it's the component which is going to decide which components are rendered based on the current URL path.

# 補充
原本是透過state在控制畫面，現在可以透過router來改變畫面
> 透過State改變URL路徑以及render的內容

...
  state = {
    contacts: [],
    screen: 'list'
  }
  ...
        {this.state.screen === 'list' && (
          <ListContacts
            contacts={this.state.contacts}
            onDeleteContact={this.removeContact}
            onNavigate={() => {
              this.setState(() => ({
                screen: 'create'
              }))
            }}
          />

        )}
        {this.state.screen === 'create' && (
          <CreateContact />
        )}
		

> 透過router來改變之後的程式碼

<Route exact path='/' render={()=>{
          <ListContacts
          contacts={this.state.contacts}
          onDeleteContact={this.removeContact}
          onNavigate={() => {
            this.setState(() => ({
              screen: 'create'
            }))
          }}
        />
        }}>
        <Route path='/create' render={<CreateContact />}></Route>

## Route 的 Component props
reference : https://reactrouter.com/web/api/Route/children-func

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

// All route props (match, location and history) are available to User
function User(props) {
  return <h1>Hello {props.match.params.username}!</h1>;
}

ReactDOM.render(
  <Router>
    <Route path="/user/:username" component={User} />
  </Router>,
  node
);

- 若使用Component裡面寫inline function的話就會導致每次component都會從DOM裡面unmount卸載，然後再重新裝一個新的component即使內容都沒什麼變化，也就是一直rerender。

## Route 的 Render : func
如果不想要re-render很多次然後也想把function寫在route裡面可以使用render function，render props function可以存取所有same route props(match, location and history)作為the component render prop.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

// convenient inline rendering
ReactDOM.render(
  <Router>
    <Route path="/home" render={() => <div>Home</div>} />
  </Router>,
  node
);

// wrapping/composing
// You can spread routeProps to make them available to your rendered Component
function FadingRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={routeProps => (
        <FadeIn>
          <Component {...routeProps} />
        </FadeIn>
      )}
    />
  );
}

ReactDOM.render(
  <Router>
    <FadingRoute path="/cool" component={Something} />
  </Router>,
  node
);

> Warning
> Warning: `<Route component>` takes precedence over `<Route render>` so don’t use both in the same `<Route>`.