react-router

使用React router

npm install react-router --save

之後開啟client.js

改為下面，看是否仍正常啟動

import React from 'react'
import ReactDOM from 'react-dom'
import App from '../components/App'
import { Router, Route, hashHistory } from 'react-router'

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>
),document.getElementById('app'))

再改為下面看看

Client.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from '../components/App'
import Proptest from '../components/Proptest.js';
import TextDisplay from '../components/TextDisplay'
import { Router, Route, hashHistory } from 'react-router'

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/TextDisplay" component={TextDisplay}/>
    <Route path="/Proptest" component={Proptest}/>
  </Router>
),document.getElementById('app'))

Proptest.js

import React, { Component } from 'react'

const Proptest = () => (
  <div>Proptest</div>
);

export default Proptest

TextDisplay.js

import React, { Component } from 'react'

const TextDisplay = () => (
  <div>TextDisplay</div>
);

export default TextDisplay

到路徑http://localhost:3000/#/TextDisplay

即可看到，元件的切換

(發現頁面切換元件很快速，我們以前要做到這樣必須用AJAX，或模板引擎內的動態compile(一樣是AJAX加載)， 而React沒用到ajax，是在client端計算更改的virtual DOM後更新到DOM上)

2.Link

接著到App.js加上

import React, { Component } from 'react'
import TextDisplay from './TextDisplay'
import { Link } from 'react-router'

class App extends Component {

  render() {
    return (
      <div>
        <ul role="nav">
          <li><Link to="/TextDisplay">TextDisplay</Link></li>
          <li><Link to="/Proptest">Proptest</Link></li>
        </ul>
        <TextDisplay/>
      </div>
    ) 
  }
}
export default App

即可看到點選li跳至不同元件，及更改了url

3.我們現在想讓App.js變成一個nav然後點選後App.js不動，在他的下面render不同的component，所以我們要把route改為巢狀

client.js

import React from 'react'
import { render } from 'react-dom'
import App from '../components/App'
import Proptest from '../components/Proptest'
import TextDisplay from '../components/TextDisplay'
import { Router, Route, hashHistory } from 'react-router'

render(( 
    <Router history={hashHistory}>
        <Route path="/" component={App}>
             <Route path="/Proptest" component={Proptest}/>
             <Route path="/TextDisplay" component={TextDisplay}/>
        </Route>
    </Router> 
  ),document.getElementById('app'))

App.js

import React, { Component } from 'react'
import TextDisplay from './TextDisplay'
import { Link } from 'react-router'

class App extends Component {

  render() {
    return (
    <div>
        <ul role="nav">
          <li><Link to="/TextDisplay">TextDisplay</Link></li>
          <li><Link to="/Proptest">Proptest</Link></li>
        </ul>
         {this.props.children}
    </div>
  )}

}
export default App

，因為今天兩個component在client.js下為App.js的子代，所以要用{this.props.children}去顯示 (更改後記得重新整理)

4.

幫link 加上active時的style

App.js

import React, { Component } from 'react'
import TextDisplay from './TextDisplay'
import { Link } from 'react-router'

class App extends Component {

  render() {
    return (
    <div>
     <ul role="nav">
          <li><Link to="/TextDisplay" activeStyle={{ color: 'orange' }}>TextDisplay</Link></li>
          <li><Link to="/Proptest" activeStyle={{ color: 'red' }}>Proptest</Link></li>
        </ul>
         {this.props.children}

    </div>
  )}

}
export default App

或是像原本一樣寫active時的css也可以

5.像Express 使用參數url

新增一個元件Repo.js

import React, { Component } from 'react'

const Repo = (props) => (
  <div>{props.params.repoName}</div>
);

export default Repo

更改Client.js

import React from 'react'
import { render } from 'react-dom'
import App from '../components/App'
import Proptest from '../components/Proptest'
import TextDisplay from '../components/TextDisplay'
import Repo from '../components/Repo'
import { Router, Route, hashHistory } from 'react-router'

render(( 
    <Router history={hashHistory}>
        <Route path="/" component={App}>
             <Route path="/Proptest" component={Proptest}/>
             <Route path="/TextDisplay" component={TextDisplay}/>
             <Route path="/repo/:userName/:repoName" component={Repo}/>
        </Route>
    </Router> 
  ),document.getElementById('app'))

之後在url輸入http://localhost:3000/#/repo/this/is 即可

PS:巢狀route，當url是子代時，會把所有的父代component都render出

7.消除原本在url上的#

將hash history改為browser history

Client.js

import { Router, Route, browserHistory  } from 'react-router'

<Router history={browserHistory}>

參考: https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#configuring-your-server

參考至

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route