（筆記）react router - <Route>

[gracekrcx]

Route render methods

<Route component>

最常用

<Route render>

• render: func

  <Route exact path="/home" render={({ location, match, history }) => (
  isLoggedIn() ? (
  <Redirect to="/front"/>
  ) : (
  <Home />
  )
  )}/>

<Route children> function

• children: func
• 特別的存在

  
  <Route
  path={to}
  children={({ location, match, history }) => (
  <li className={match ? "active" : ""}>
  <Link to={to} {...rest} />
  </li>
  )}
  />

## Route props
match
location
history

### Note : 
1. From react-router-v4 onEnter, onUpdate, and onLeave is removed
2. `<Route children>` takes precedence over both `<Route component>` and `<Route render>` so don’t use more than one in the same <Route>.

### 參考
[Route render methods](https://reactrouter.com/web/api/Route/route-render-methods)
[onEnter not called in React-Router](https://stackoverflow.com/questions/42768620/onenter-not-called-in-react-router)
[Viscovery 如何從React Router v2 轉換至v4](https://medium.com/frochu/viscovery-%E5%A6%82%E4%BD%95%E5%BE%9Ereact-router-v2-%E8%BD%89%E6%8F%9B%E8%87%B3v4-ebcb0e418a8d)

[gracekrcx]

Shallow routing(NEXT.JS)

Day05 - 使用 Link 實作換頁

Shallow routing 是一種用於同一個 page 的路由，你能夠改變 url 上的 query string，但是不執行 getServerSideProps 、 getStaticProps 與 getInitialProps 裡面的程式，此外還會保留 page 中的狀態。