這次帶給大家React路由管理React Router使用步驟詳解，React路由管理React Router使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
React專案通常都有很多的URL需要管理，最常使用的解決方案就是React Router了，最近學習了一下，主要是看了一下官方的英文文檔，加以總結，以備後查。
React Router是做什麼的呢，官方的介紹是：
##UIUI組件和URL同步,透過簡單的API即可實現強大的特性如：代碼懶加載，動態路由匹配，路徑過渡處理等。A complete routing library for React，keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.
下面是一些React Router的用法：
一簡單渲染Route 有一點需要牢記於心，Router是作為一個React元件，可以進行渲染。
// ...
import { Router, Route, hashHistory } from 'react-router'
render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
</Router>
), document.getElementById('app'))新增更多的路由，並指定它們對應的元件import About from './modules/About'
import Repos from './modules/Repos'
render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Router>
), document.getElementById('app'))登入後複製
// modules/App.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
<p>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
</p>
)
}
})實際上，我們的app都是一系列嵌套的盒子，對應的url也能夠說明這種嵌套關係：
<App> {/* url / */}
<Repos> {/* url /repos */}
<Repo/> {/* url /repos/123 */}
</Repos>
</App>元件嵌套
到公共元件App上使得App元件上的導覽列Nav 等公共部分能夠共享：// index.js
// ...
render((
<Router history={hashHistory}>
<Route path="/" component={App}>
{/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/}
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>
), document.getElementById('app'))// modules/App.js
// ...
render() {
return (
<p>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
{/* 注意这里将子组件渲染出来 */}
{this.props.children}
</p>
)
}
// ...<li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return <Link {...this.props} activeClassName="active"/>
}
})// modules/App.js import NavLink from './NavLink' // ... <li><NavLink to="/about">About</NavLink></li> <li><NavLink to="/repos">Repos</NavLink></li>
考慮下面的url：
/repos/reactjs/react-router
/ repos/facebook/react他們可能對應的是這種形式：/repos/:userName/:repoNameurl中的可變參數
可以透過this.props.params[paramsName] 取得：// modules/Repo.js
import React from 'react'
export default React.createClass({
render() {
return (
<p>
{/* 注意这里通过this.props.params.repoName 获取到url中的repoName参数的值 */}
<h2>{this.props.params.repoName}</h2>
</p>
)
}
})// index.js
// ...
// import Repo
import Repo from './modules/Repo'
render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
{/* 注意这里的路径 带了 ：参数 */}
<Route path="/repos/:userName/:repoName" component={Repo}/>
<Route path="/about" component={About}/>
</Route>
</Router>
), document.getElementById('app'))// index.js
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
// and the Home component
import Home from './modules/Home'
// ...
render((
<Router history={hashHistory}>
<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'))同理也有 預設連結元件 IndexLink。 、
七使用Browser History#######前面的範例一直使用的是hashHistory，因為它一直可以運行，但更好的方式是使用Browser History，它可以不依賴哈希連接埠（#）。 ###首先需要改 index.js:
// ...
// bring in `browserHistory` instead of `hashHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
render((
{/* 注意这里 */}
<Router history={browserHistory}>
{/* ... */}
</Router>
), document.getElementById('app'))其次需要 修改webpack的本地服务配置，打开 package.json 添加 –history-api-fallback ：
复制代码 代码如下:
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"
最后需要在 index.html中 将文件的路径改为相对路径：
<!-- index.html --> <!-- index.css 改为 /index.css --> <link rel="stylesheet" href="/index.css" rel="external nofollow" > <!-- bundle.js 改为 /bundle.js --> <script src="/bundle.js"></script>
这样就去掉了url中的 # 。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是React路由管理React Router使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
