react-router-dom v^4學習歷程（一）

react-router-dom的版本已經更新到了4.1.1，那麼咱們就一塊兒來學習學習react v4這個新版路由的基本使用吧！

在學習路由以前咱們先須要複習幾個基礎知識，關於react組件的構建，和分離組件到另外的文件

生成react組件的方式

• 咱們能夠採用一個函數來快速生成一個 react組件

觀察以下代碼

import React from 'react'
const Mycomponent=()=>(
  <div>
    <h2>這是個人第一個函數組件</h2>
  </div>
  
)
ReactDOM.render(<Mycomponent/>,document.getElementById('example'))

渲染組件到根節點上，能夠看出沒有任何問題。
咱們也能夠把這個組件分離到另一個文件中，用es6的 語法import default export導入導出，而後在index.jsx中引用它

//Mycomponent.jsx
import React from 'react'
const Mycomponent=()=>(
  <div>
    <h2>這是個人第一個函數組件</h2>
  </div>
  
)
export default Mycomponent
//index.jsx
import Mycomponent from './Mycomponent'

這樣咱們就能夠作到函數式構建的react組件在react項目中模塊化使用

• 第二種就是咱們經常使用的class方式聲明組件

import React from 'react'
    export default class Topic extends React.Component{
    
    render(){
      return (
        <div>
        <h3>{this.props.match.params.topicId}</h3>
      </div>
    
        )
      }
    }

向構造react組件模板的函數中傳入路由參數

若是一個react組件做爲Route的component屬性值，以下

<Route  exact path="/" component={Home}></Route>

• 函數式聲明Home時，它的模板定義函數就會默認接受一個對象做爲參數，裏面包含了路由的各類信息
  

這樣咱們就能夠利用模板定義函數參數中的信息獲取到路由中的參數。
`

const Topic=({match})=>//es6語法將參數對象中的match屬性
 (                         //賦值給參數match
 <div>
<h3>{match.params.topicId}</h3>
 </div>
)

• 若是是用類的方式聲明的組件那麼獲取路由參數信息的辦法是在jsx渲染模板中
  this.props.match.params

---

預備知識完畢，下面咱們就看看怎麼作一個react路由

路由基本用法

路由要解決的基本需求是從一個連接點擊到另一個連接，在頁面中無刷新跳轉到頁面的另一部份內容。相似於tabs面板。
例若有以下界面

三個組件以下：

const App=()=>(
  <h2>主頁</h2>
)
const Hot=()=>(<div><h2>熱門</h2></div>)
const Content=()=>(
  <h2>文章</h2>
)
const Zhuanlan=()=>(<div>
  <h2>專欄</h2>
</div>)

那麼在須要使用路由的頁面組件裏面，渲染以下模板

import {Link,Route,BrowserRouter as Router} from 'react-router-dom' 
  (<Router>
  <div>
    <ul>
      <li><Link to="/">主頁</Link></li>
      <li><Link to="/hot">熱門</Link></li>
      <li><Link to="/zhuanlan">專欄</Link></li>
    </ul>
    <hr/>
    <Route  exact path="/" component={App}></Route>
    <Route path="/hot" component={Hot} ></Route>
    <Route path="/zhuanlan" component={Zhuanlan}></Route>
  </div>
</Router>)

注意使用Router做爲最外層標籤，裏面只能有一個一級子節點，用Link來導航 ，to指定路徑，Route指定要導航到的組件，這樣一個路由的基本使用就成型了。exact用於精準匹配路徑，不用exact也會匹配到匹配的路徑的子路徑，這樣兩個路由組件都會顯示。咱們須要的是每次切換隻會顯示一個Route中指定的組件

路由的嵌套和路徑中參數傳遞

• 在一個子組件Hot中，再嵌套一個子路由咱們應該怎麼作？
  很簡單就是把路由Route再寫入Hot的模板中實現路由嵌套。

• 路徑中傳遞參數到路由到的組件，就是在路徑前面加上: ,這樣這個路由地址就會變成一個參數被組件接受到。例如${match.url}/:id
  ${match.url}能夠獲取到當前的基礎路徑。而後在路由用到的組件中能夠用

match.params(函數式聲明的組件中,match須要在函數參數中引入)或this.props.match.params（React class類render函數中）
示例以下

///父組件中
    const Hot=({match})=>(<div>
    
    <h2>熱門</h2>
    <Link to={`${match.url}/article`}>文章</Link>
    <Link to={`${match.url}/qa`}>問答</Link>
    <Link to={`${match.url}/news`}>新聞</Link>
    <hr/>
    <Route path={`${match.url}/:type`} component={Content}></Route>
    
    </div>)
    //子組件中
    const Content=({match})=>(
  <div>
  <h2>熱門子目錄</h2>
<p>{match.params.type}</p>
  </div>
)

總結
1.組件生成的方式有兩種，render在類中顯式渲染，函數生成。
2.路由的基本用法Router>Route path component指定路徑和組件，Link添加導航按鈕連接，to指定路徑地址
3.路由的嵌套，直接在子組件模板中添加Route，Link，match.url引入基礎路徑
4.路由路徑參數傳遞到模板，用baseUrl/:id相似格式，組件中用match.params.id接收。