reactJS -- 14 Router 概念

官方網站 ：https://react-guide.github.io/react-router-cn/

頁面作的有層級

一.安裝Router

1.首先經過 npm 安裝：(最新版)

$ npm install --save react-router

1.安裝的版本就是 React Router 2 的版本，全部的使用就會和課程同樣了。

npm install react-router@2.8.1

 

二.編寫router.js

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';
import {Router,Router,hashHistory} from 'react-router'; 

export default class Root extends React.Component{
  render(){
    return (
      
    );
  }
}

三. 修改以router爲項目入口

注意：在· Route 中引入·組件都要 export default

須要注意 Route 綁定的 component 中的 class 有沒有添加 export default

import React from 'react';
import ReactDOM from 'react-dom';
import index from './index';
import ComponentList from './components/list';
import {Router,Route,hashHistory} from 'react-router';

export default class Root extends React.Component{
  render(){
    return (
      //這裏替換了以前的Index 變成了程序的入口
          <Router history = {hashHistory}>
              <Route component={index} path="/" />
              <Route component={ComponentList} path="list" />
         </Router>

    );
  }
}

ReactDOM.render(<Root/>, document.getElementById('example'));

四.建立list.js

import React from 'react';
export default class ComponentList extends React.Component{
  render(){
    return {
      <div>
        <h2>這裏是列表頁面</h2>
      </div>
    }；
  }；


}

五.將list.js 引入router.js

import ComponentList from './components/list.js';

六.修改package.json 

"name": "003",
  "version": "1.0.0",
  "description": "",
  "main": "router.js",

七.修改 webpack.config.js

修改入口文件。

entry: "./src/js/router.js",

八. 定義嵌套頁面

1.建立detail.js

import React from 'react';
export default class ComponentList extends React.Component{
  render(){
    return (
      <div>
        <h2>這裏是嵌套在首頁中的詳細頁面</h2>
      </div>
    );
  };


}

2. 修改 router.js

import React from 'react';
import ReactDOM from 'react-dom';
import index from './index';
import ComponentList from './components/list';
import ComponentDetail from './components/detail.js';
import {Router,Route,hashHistory} from 'react-router';

export default class Root extends React.Component{
  render(){
    return (
      //這裏替換了以前的Index 變成了程序的入口
          <Router history = {hashHistory}>
              <Route component={index} path="/">
                <Route component={ComponentDetail} path="details"></Route>
              </Route>
              <Route component={ComponentList} path="list"></Route>
         </Router>

    );
  }
}

ReactDOM.render(<Root/>, document.getElementById('example'));

3.修改index.js

list是一個單獨的頁面，details  是嵌套在index裏面的頁面，爲了將detail頁面嵌套在index裏面，在index頁面中添加一個 idv ,在內添加 {this.props.children} 

添加

this.props 對象的屬性與組件的屬性一一對應，可是有一個例外，就是 this.props.children 屬性。它表示組件的全部子節點

<div>
	{this.props.children}
</div>

訪問details後發現details 嵌套在 index頁面中

九 . 跳轉

有了router 後添加連接進行跳轉。

在header 中添加連接

import {Link} from 'react-router'

return (
      <header style={styleComponentHeader.header} className="smallFountSize">
        <h1>這裏是頭部</h1>
        <ul>
          <li><Link to={'/'}>首頁</Link></li>
          <li><Link to={'/details'}>嵌套的詳情頁面</Link></li>
          <li><Link to={'/list'}>列表頁面</Link></li>
        </ul>
      </header>
    )

十. Router參數的傳遞

1.點擊連接向list頁面傳入參數

（1）在router裏面對list 參數進行定義

<Route component={ComponentList} path="list/:id"></Route>
// ／：參數名

（2）在header頁面中傳入參數

<ul>
  <li><Link to={'/'}>首頁</Link></li>
  <li><Link to={'/details'}>嵌套的詳情頁面</Link></li>
  <li><Link to={'/list/1234'}>列表頁面</Link></li>
</ul>

（3）在list.js界面中引用傳入的參數

import React from 'react';
export default class ComponentList extends React.Component{
  render(){
    return (
      <div>
        <h2>這裏是列表頁面 Id : {this.props.params.id}</h2>
      </div>
    );
  };


}

傳入多個參數：

/list/1234/desc/...

或者經過 state