React 路由

　　React 路由

　　　　React 推出兩個版本 一個是 react-router 一個是 react-router-dom

　　　　這裏使用的是 react-router-dom  由於該方法多了一個  Link 組件

　　　1.　在建立好 React 環境的基礎上 下載 react-router-dom

　　　　　　npm install react-router-dom

　　　2. 引入  react-router-dom

　　注意 :  在引入時若是第一個參數只有 HashRouter 時  那麼在模板中標籤名爲<HashRouter>

import {HashRouter as Router,Link,Route} from 'react-router-dom';

　　在下面的模板中

　　　<Router></Router> 爲組件導出的容器, 在該標籤中只能有一個子節點, <Route>是咱們配置項

class App extends Component {    //建立組建類
  render() {
    return (
      <div className="App">
          <Router>
              <div>
                  <Route path="/home" component={Home}></Route>
                  <Route path="/list" component={List}></Route>
              </div>
          </Router>
      </div>
    );
  }
}

　　　　3 . 路由傳參

　　　　　　 在 Route 配置項中的 path 中加形參 , 實參則在網址中加入便可

<Route path="/list/:id" component={List}></Route>

　　　　　　若是想要獲取實參,須要在 該組件中加 componentDidMount .

class List extends Component {
    render() {
        return (
            <div className="list">
                <p>這是個人列表頁</p>
            </div>
        );
    }
    componentDidMount(){
        console.log(this.props.match.params);
    }
}