初步學習React Router 4.0

 

　　

React Router 4.0 是react官方推薦的路由庫。4是已經正式發布的最新版本。

初始化項目啟動之后：

 

npm run eject 彈出配置文件。自定義配置webpack

查看下package.json中是不是有react-router-dom,沒有安裝即可

注意：安裝最新版本的react   命令行：npm install --save react@next react-dom@next   

@next即安裝最新的版本

"react-router-dom": "^4.2.2"

如下圖配置路由   引入 BrowserRouter ,Route ,Switch

BrowserRouter 包裹整個應用、整個應用只有一個

里面只有一個子節點。多個要用div包裹

注意：多個路由  要加個參數  switch 只渲染命匹配的第一個組件

  exact   實現精確匹配（匹配到第一個就不往下繼續匹配）

 

 

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter ,Route ,Switch } from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <div>
        <BrowserRouter>
            <Switch>
                <Route path='/' component={App} exact />
            </Switch>
        </BrowserRouter>
    </div>
    , document.getElementById('root'));
registerServiceWorker();

　　

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter ,Route ,Switch } from 'react-router-dom';
import './index.css';
import App from './App';
import Newsdetail from './containers/newsdetail/index';
import Newslist from './containers/newslist/index';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <div>
        <BrowserRouter>
            <Switch>
                <Route path='/' component={App} exact />
                <Route path='/newsdetail' component={ Newsdetail }/>
                <Route path='/newslist' component={ Newslist }/>
            </Switch>
        </BrowserRouter>
    </div>
    , document.getElementById('root'));
registerServiceWorker();

　第一種方式：

this.props.history.push

 

 第二種方式 link的方式。相當於a跳轉

<Link to='/newslist'></Link>

 3 子組件中擁有路由的方法：

得到的是undefined  在子組件中沒有路由。如果想擁有路由

先安裝：babel-plugin-transform-decorators-legacy

配置文件中如下;

頁面中使用@

 

 

 

 

import React from 'react';
import { withRouter } from 'react-router-dom';
@withRouter
class Subnews extends React.Component{
    constructor(props){
        super(props);
        this.clickhandler=this.clickhandler.bind(this);
    }
    clickhandler(){
        console.log(this.props.history);
        this.props.history.push('/');
    }
    render() {
        return (
            <div>
                這是Subnews
                <button onClick={this.clickhandler}>點擊跳轉到首頁</button>
            </div>
        );
    }
}
export default Subnews;

 4：URL參數。可以用冒號標識參數

在newpage中獲取參數：

這是參數：{this.props.match.params.id}