看這些英文文檔真的是讓我見識(shí)到自己的英文水平真的是捉雞,接下來的部分會(huì)越來越難第献,我的理解可能不是那么地準(zhǔn)確囊拜,但是我還是將其記錄下來,當(dāng)我真正學(xué)懂時(shí)再回來看時(shí)可能就會(huì)更有感覺吧究孕。
你注意過在我們的app上我們并不需要任何的導(dǎo)航就可以渲染Home
組件嗎啥酱?
讓我們添加一個(gè)鏈接到/
上厨诸,看看發(fā)生可什么镶殷?
現(xiàn)在導(dǎo)航欄已經(jīng)做好了,注意到奇怪的地方嗎微酬?導(dǎo)航到Home
的鏈接一直是活躍的绘趋!就像我們之前學(xué)到的一樣,當(dāng)子組件是活躍時(shí)得封,父組件也將是一直活躍的埋心。不幸的是,/
是所有的父組件忙上。
對(duì)于這個(gè)鏈接拷呆,我們只想讓它活躍當(dāng)索引路由為活躍時(shí)。有兩種方法讓路由知道你正要鏈接到"index route"疫粥,所以只有添加了"active"屬性時(shí)"index route"才會(huì)被渲染茬斧。
讓我們使用IndexLink
而不是NavLink
。
//App.js
import React from 'react'
import NavLink from './NavLink'
import {IndexLink} from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>
</ul>
{this.props.children}
</div>
)
}
})
我們同樣可以使用Link
通過使用onlyActiveOnIndex
屬性梗逮。
import React from 'react'
import NavLink from './NavLink'
import {IndexLink} from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>
</ul>
{this.props.children}
</div>
)
}
})
我們現(xiàn)在所使用的URLs是由哈希搭建的项秉,這個(gè)是默認(rèn)的,但是還有一個(gè)更好的方法慷彤。
現(xiàn)代瀏覽器允許讓JavaScript處理沒有http的請(qǐng)求娄蔼,所以我們不必依靠哈希#
來控制我們路由的部分的url怖喻。
我們現(xiàn)在配置瀏覽器的歷史記錄:
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, browerHistory, IndexRoute } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Repo from './modules/Repo'
import Home from './modules/Home'
render((
<Router history={browerHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/repos" component={Repos}>
<Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>
<Route path="/about" component={About}/>
</Route>
</Router>
), document.getElementById('app'))
也就是把hashHistory
改為browserHistory
。
問題來了岁诉,當(dāng)我們點(diǎn)進(jìn)任何的一個(gè)鏈接然后刷新之后就會(huì)報(bào)錯(cuò)锚沸。如下圖所示:
我們的服務(wù)器需要傳遞你的app所傳進(jìn)來的URL弥咪,因?yàn)槟愕腶pp在瀏覽器中操縱著URL粒褒。我們的當(dāng)前的服務(wù)器是不知道如何處理URL的。
Webpack Dev Server有辦法可以做到涝焙,找到package.json文件坠韩,然后添加后面的這段代碼:
--history-api-fallback
如下圖所示這樣:
關(guān)掉webpack再重新啟動(dòng):
重新刷新頁(yè)面我們便可以正常地使用了距潘,在URL當(dāng)中已經(jīng)沒有了#
,而是直接的路徑只搁。
這節(jié)內(nèi)容跟React Router無關(guān)音比,但是這節(jié)與webpack dev server相關(guān)。
首先安裝這個(gè)模塊:
npm install express if-env compression --save
接著分別配置package.json和webpack.config.js文件:
package.json:
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:dev": "webpack-dev-server --inline --content-base . --history-api-fallback",
"start:prod": "webpack && node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"compression": "^1.7.1",
"express": "^4.16.2",
"if-env": "^1.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"http-server": "^0.8.5",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js:
module.exports = {
entry: './index.js',
output: {
path: 'public',
filename: 'bundle.js',
publicPath: '/'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}
當(dāng)你運(yùn)行npm start
這個(gè)命令時(shí)须蜗,它會(huì)自動(dòng)地檢查我們的環(huán)境中是否有NODE_ENV
,如果有硅确,就會(huì)執(zhí)行npm run start:prod
,如果沒有明肮,則執(zhí)行npm run start:dev
菱农。
未完成。柿估。循未。