react 學習總結–React-Router

說明

react-route 版本 ： “^3.0.0”

react-router-redux 版本 ； “^4.0.7”

簡介

react 本身沒有路由功能，必須藉助第三方的庫，React-Router 是官方推薦的路由庫，通過URL的管理，實現元件的切換和狀態的變化，可以用來開發SPA(單頁應用)

react-router 以 react component 的元件方式提供 API，主要API如下

• Router //容器
• Route //路由
• IndexRoute //指定預設情況下的子元件
• Link //連結
• IndexLink //連結到跟路由
• Redirect //重定向
• IndexRedirect //跟路由的重定向

1.Router

Router 元件本身只是一個容器，真正的路由要有Route元件定義
<Router history={browhistory} routes={routes} />

Router元件有一個引數history表示切換路由的方法，常用的history有一下三種

• browserHistory
• hashHistory
• createMemoryHistory

browserHistory

browserhistory 是使用 React Router 的應用推薦的 history。它使用瀏覽器中的 History API 用於處理 URL ，路有效果：/home/ceshi/fir

注意：使用 browserHistory ,需要伺服器進行配置

hashHistory

hashHistory 使用 URL 中的 hash（#）部分去建立形如 example.com/#/some/path 的路由。

hashHistory 不需要伺服器任何配置就可以執行

2.Route

Route元件定義了URL路徑與元件的對應關係，可以同時使用多個Route
， Route元件還可以巢狀父路由寫this.props.children 加入子路由
，子路由也可以不寫在Router中，而是通過傳入routes屬性

let routes = <Route
 
 path="/" component={App}></Route>
<Router routes={routes} history={browserHistory} />

path 屬性

Route元件的path屬性，指定路由的匹配規則，可以省略，這樣不管路徑是否匹配，總是會載入指定元件

path屬性可以使用相對路徑（不以/開頭,相對於父元件的路徑）或者絕對路徑（/）,
path 路徑可以傳遞引數（path=”/about/:id”）可以通過this.props.location.query來查詢

路徑語法

• <Route path="/hello/:name"> 表示匹配hello下任意部分
• <Route path="/hello(/:name)">()表示可選部分
• *表示 匹配任意字元
• **表示 匹配多個資料夾

3.IndexRoute

指定預設情況下載入的子元件

    <Route path="/" component={App}>
        <IndexRoute component={Test}/>
        <Route path="home" component={Home}/>
        <Route path="detail" component={Dates}/>
        <Route path="test/**" component={Test}>
            <IndexRoute component={Child} />
            <Route path="child" component={Child}/>
        </Route>
    </Route>

4.Link

Link元件用於取代<a>元素，生成一個連結，允許使用者點選後跳轉到另一個路由。
Link 可以設定屬性

• className ： 設定靜態顯示類
• style : 設定靜態顯示樣式
• activeClassName ： 新增訪問後類
• activeStyle ： 設定訪問後樣式

5.IndexLink

如果想要連結到根路由，不要使用Link 要使用 IndexLink

<IndexLink to="/">Home</IndexLink>

6.Redirect

用於路由跳轉，即為訪問一個路由會跳轉到另外一個路由經，可以在外邊定義路由元件，在想要訪問的位置設定子元件跳轉

    <Route path="test" component={Test}>
      {/* 從 /test/a 跳轉到 /a */}
      ＜Redirect from="a" to="/a" />
    </Route>

7.IndexRedirect

IndexRedirect 元件用於訪問根路由的時候，將使用者重定向到某個子元件

    <Route path="/" component={App}>
        <IndexRedirect to="/test"/>
        <Route path="test" component={Test} />
    </Router>

8.常用方法

獲取URL資訊

路由系統中直接連線的元件都會有location屬性，通過this.props.location可以獲取URL資訊

通過引入 browserHistory 也可以訪問當前location ,即使不是與路由系統直接連線的元件也可以訪問，並且還可以實現路由跳轉

    import {browserHistory} from 'react-router';
    console.log(browserHistory.getCurrentLocation());//獲取當前URL資訊
    browserHistory.goBack(); //調到上一個頁面
    let path = `/home`;
    browserHistory.push(path); //跳轉到path頁面

如果使用了react-router-redux 外掛，還可以進一步提升可操作性

    import {syncHistoryWithStore} from 'react-router-redux';
    // 利用react-router-redux提供的syncHistoryWithStore我們可以結合redux 的 store同步導航事件
    const browhistory = syncHistoryWithStore(browserHistory, store);
    <Router history={browhistory} routes={routes} />

    //在 reducer 配置中引入 routing
    import {routerReducer} from 'react-router-redux';
    const reducer = combineReducers({ routing: routerReducer});

    //使用時，獲取 store 的 state.routing.locationBeforeTransitions
    //即為 元件更新前獲取的下一個路由改變

使用context,實現路由跳轉

    class Child extends Component{
      constructor(props,context){
        super(props,context);
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(){
        console.log(this.context.router);
      }
      render() {
        return (
          <button onClick={this.handleClick}>點選</button>
        );
      }
    }
    Child.contextTypes = {
      router : React.PropTypes.object
    }

下一篇–Redux傳送門

• Redux API
• React-Redux API