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

首先，在該項目開始之前，還請大家能夠先下載一個項目腳手架。本教程基于該腳手架進行開發

先看文件大致架構

渲染 Route （index.js 啟動的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 進行跳轉組件

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'}} >首頁 </Link></div><div><Link to="/about" activeStyle={{color: 'red'}}>關于我們</Link></div><div><Link to="/about/test" activeStyle={{color: 'red'}}>自媒體</Link></div><div><Link to={{pathname : "/product", query : {name : 'liujunbin_product'} }} activeStyle={{color: 'red'}} >產品服務</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

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

onlyActiveOnIndex 只有是當前路由才顯示 一個路由的判斷。

URL 參數的傳遞 -- 傳遞query的方法

• Link 的寫法，Link 代表A標簽

  <div><Link to={{pathname : "/product", query : {name : 'liujunbin_product'} }} activeStyle={{color: 'red'}} >產品服務</Link></div>

• 獲取query的值

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

URL 參數的傳遞 -- 傳遞params的方法

• router 的寫法

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

• Link 的寫法，Link 代表A標簽

  <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 需要注意。在進入子路由的時候，父路由也會執行。看下圖

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

使用 browserHistory

現代瀏覽器運行 JS 操作 URL 而不產生 HTTP 請求，
browserHistory和hashHistory不一樣，使用browserHistory的時候，瀏覽器中導航欄的URL就不會出現hash鍵值對。實際項目中也一般用browserHistory.

<Router history={browserHistory}>

activeStyle,activeClassName

當前路由被點擊處于觸發顯示狀態的時候，這個簡單，沒什么說的

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

Redirect重定向 （感覺可以來做404，沒測試）

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

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

其他的一些特性暫時不說了，使用的不多

作者：二月長河
鏈接：https://www.jianshu.com/p/3089495d8532
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。

轉載于:https://www.cnblogs.com/passkey/p/10671644.html

總結

以上是生活随笔為你收集整理的React Router 黑笔记？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。