c
c
class
Search…
⌃K

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
即可看到,元件的切換
(發現頁面切換元件很快速,我們以前要做到這樣必須用AJAX,或模板引擎內的動態compile(一樣是AJAX加載), 而React沒用到ajax,是在client端計算更改的virtual DOM後更新到DOM上)
接著到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}>
參考至