試着用React寫項目-利用react-router解決跳轉路由等問題（二）

轉載請註明出處：王亟亟的大牛之路

這一篇仍是繼續寫react router相關的內容，廢話以前先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android （總有你需要的東西）

---

上一篇講到咱們可以利用 Router來實現嵌套跳轉等效果，但是那些都是靜態的，這一篇着重於寫一些動態跳轉內容

Link

以前也有說起。舊時代咱們常常使用的跳轉形式就是<a/>,React豐富的api也提供給咱們類似的實現。那就是Link,咱們用一個樣例來看一下這玩意怎麼用

他也是react-router包裏的一部分，先 import

import { Link } from 'react-router'

而後就可以正常使用了，像這樣

import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <Link to="/Three">Three</Link><br></br>
          <Link to="/Three">Three</Link>
        </ul>
      </div>
    )
  }
})

效果例如如下

固然。以前註冊的<Route>不能少，否則沒法進行跳轉

main.js的片斷

<Route path="/Three" component={Three}/>
  <Route path="/Two" component={Two}/>

---

activeStyle activeClassName

activeStyle 可以幫咱們改變連接的樣式。使用簡單配一個屬性就能夠。像這樣

<Link to="/Two" activeStyle={{color: 'red'}}>Two</Link>

上面代碼中，當前頁面的連接會紅色顯示

還有個字段是activeClassName 指定當前路由的Class

像這樣

<Link {...this.props} activeClassName="active"/>

那既然 類似的使用場景很是多。爲什麼不封裝一個組件。方便調用？

ok,咱們新建一層文件夾，像這樣

裏面放一個專門處理跳轉的NavLink.js對<Link>進行一些簡單的封裝

import React from 'react';
import { Link } from 'react-router';

export default React.createClass({
  render() {
    return (<Link {...this.props} activeClassName="active"/>)
  }
})

很是easy讓咱們能傳參。統一設置activeClassName，固然你想本身定義怎麼都可以

---

URL Params

有些時候咱們會碰到一些很是像但又不是全然不一樣的路由，像這樣

/Three/haha
/Three/haha/haha1
/Three/hehe/hehe1

官方提供給咱們一個 以: 開頭的配對形式。像這樣

/Three/:haha/:haha1

咱們 拿

/Three
/Three/haha

作個演示案例

因爲是分層渲染，因此Three/haha就要交給第三方黑暗勢力去展現。而Three仍是給Three

因此咱們的main.js,現在長這樣

import React from 'react';
import { render } from 'react-dom';
import { Router , Route , hashHistory , Link } from 'react-router';
import First from './First';
import Three from './Three';
import Two from './Two';
import Four from './Four';



render((
  <Router history={hashHistory}>
    <Route path="/" component={First}>
    </Route>
    <Route path="/Three" component={Three}/>
    <Route path="/Three/:name" component={Four}/>
    <Route path="/Two" component={Two}/>
  </Router>
), document.getElementById('app'))

Four就是咱們新加入渲染的組件，內容不用管。你得理解Three和Three/:name實質上並不是同一個東西但是他屬於同一種匹配規則。而這規則匹配後都將被Four去渲染

---

Four.js

import React from 'react';

export default React.createClass({
  render(){
    return (
      <div>
         <h2>{this.props.params.name}</h2>
      </div>
    )
  }
})

這裏接受一個傳遞來的name屬性，把它顯示出來。值是跳轉傳來的

咱們讓 第三個頁面產生多級跳轉到，更改例如如下

import React from 'react';
import styled from 'styled-components';
import NavLink from './../component/nav/NavLink';

const H2 = styled.h2`
  color: #eee
`;

export default React.createClass({
  render(){
    return (
      <div>
        <h2>hi i am three</h2>
          <ul>
            <NavLink to="/Three/haha">haha</NavLink><br></br>
            <NavLink to="/Three/heihei">heihei</NavLink>
          </ul>
      </div>
    )
  }
})

先導包把剛纔本身建立的主件給「摳來用「

import NavLink from './../component/nav/NavLink';

而後分別進行路由配置，一個傳haha一個heihei,咱們來看下Four有沒有對應效果，先看看Three

咱們點一下haha

url,值都顯示出了咱們已經獲得了傳來的haha

下一篇將是Router的完結篇，整體是從官方demo入手加以本身的理解和嘗試，有問題或者有疑問可以給我留言，謝謝。

https://github.com/ddwhan0123/ReactDemo