我橫豎睡不著，字里行間看出2個(gè)字。。。。

首先，在該項(xiàng)目開(kāi)始之前，還請(qǐng)大家能夠先下載一個(gè)項(xiàng)目腳手架。本教程基于該腳手架進(jìn)行開(kāi)發(fā)

先看文件大致架構(gòu)

渲染 Route （index.js 啟動(dòng)的component）

//index.js import 'core-js/fn/object/assign'; import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/Main'; import About from './components/about' import Product from './components/Product' import About_detail from './components/About_detail' import About_default from './components/About_default' import { Router , Route , browserHistory , IndexRoute} from 'react-router';let app = (<div><Router history={browserHistory}><Route path='/' component={App}></Route><Route path='/about' component={About}><IndexRoute component={About_default}></IndexRoute><Route path='/about/:eeee' component={About_detail} /> </Route><Route path='/product' component={Product}></Route> </Router></div>) // Render the main component into the dom ReactDOM.render(app, document.getElementById('app'));

?

使用 Link 進(jìn)行跳轉(zhuǎn)組件

require('normalize.css/normalize.css'); require('styles/App.css');import React from 'react'; import { Link } from 'react-router';class AppComponent extends React.Component {render() {return (<div className="index"><div><Link to="/" activeStyle={{color: 'red'}} >首頁(yè) </Link></div><div><Link to="/about" activeStyle={{color: 'red'}}>關(guān)于我們</Link></div><div><Link to="/about/test" activeStyle={{color: 'red'}}>自媒體</Link></div><div><Link to={{pathname : "/product", query : {name : 'liujunbin_product'} }} activeStyle={{color: 'red'}} >產(chǎn)品服務(wù)</Link></div></div> );} }AppComponent.defaultProps = { };export default AppComponent;

從 Link 到 NavLink (可選，加次封裝而已)

import React , { Component } from 'react' import { Link } from 'react-router'class NavLink extends Component {render () {return <Link {...this.props} activeStyle={{color: 'red'}} /> } } export default NavLink

使用的時(shí)候
//onlyActiveOnIndex 只有是當(dāng)前路由才顯示
<li><NavLink to="/product?name=wwwwww" onlyActiveOnIndex={true} >name=wwwwww</NavLink></li>

onlyActiveOnIndex 只有是當(dāng)前路由才顯示 一個(gè)路由的判斷。

URL 參數(shù)的傳遞 -- 傳遞query的方法

• Link 的寫(xiě)法，Link 代表A標(biāo)簽

  <div><Link to={{pathname : "/product", query : {name : 'liujunbin_product'} }} activeStyle={{color: 'red'}} >產(chǎn)品服務(wù)</Link></div>

• 獲取query的值

  <li><NavLink to="/product?name=wwwwww" onlyActiveOnIndex={true} >name=wwwwww</NavLink></li><h4>{this.props.location.query.name} </h4>

URL 參數(shù)的傳遞 -- 傳遞params的方法

• router 的寫(xiě)法

  <Route path='/about/:eeee' component={About_detail} />

• Link 的寫(xiě)法，Link 代表A標(biāo)簽

  <div><Link to="/about/test" activeStyle={{color: 'red'}}>自媒體</Link></div>

• 獲取params的值

  <h1>About</h1> <h1>{this.props.params.eeee}</h1>

嵌套 Route

<Router history={browserHistory}><Route path='/' component={App}></Route><Route path='/about' component={About}><IndexRoute component={About_default}></IndexRoute><Route path='/about/:eeee' component={About_detail} /> </Route> <Route path='/product' component={Product}></Route> </Router>

嵌套 Route 需要注意。在進(jìn)入子路由的時(shí)候，父路由也會(huì)執(zhí)行。看下圖

點(diǎn)擊的路由是自媒體，其鏈接是/about/test , 然而/about 也紅了。

使用 browserHistory

現(xiàn)代瀏覽器運(yùn)行 JS 操作 URL 而不產(chǎn)生 HTTP 請(qǐng)求，
browserHistory和hashHistory不一樣，使用browserHistory的時(shí)候，瀏覽器中導(dǎo)航欄的URL就不會(huì)出現(xiàn)hash鍵值對(duì)。實(shí)際項(xiàng)目中也一般用browserHistory.

<Router history={browserHistory}>

activeStyle,activeClassName

當(dāng)前路由被點(diǎn)擊處于觸發(fā)顯示狀態(tài)的時(shí)候，這個(gè)簡(jiǎn)單，沒(méi)什么說(shuō)的

<Link activeClassName="active" to="/">首頁(yè)</Link><div><Link to="/" activeStyle={{color: 'red'}} >首頁(yè)</Link></div>

Redirect重定向 （感覺(jué)可以來(lái)做404，沒(méi)測(cè)試）

<Redirect from="*" to="/404" />

文章稿紙的地址詳見(jiàn)github
https://github.com/976500133/react-router-demo

其他的一些特性暫時(shí)不說(shuō)了，使用的不多

作者：二月長(zhǎng)河
鏈接：https://www.jianshu.com/p/3089495d8532
來(lái)源：簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。

轉(zhuǎn)載于:https://www.cnblogs.com/passkey/p/10671644.html

總結(jié)

以上是生活随笔為你收集整理的React Router 黑笔记？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。