1. 程式人生 > >react-router 4.0踩到的坑

react-router 4.0踩到的坑

父節點 發的 row 二次開發 example 由於 實現 object gpo

接手的項目需要二次開發,項目是使用的react+react-router4.0+antd+redux來開發的,由於之前用的是react-router2.0,react-router2.0和4.0之間變化還是挺多的,在這裏記錄一下踩到遇到的問題

1.dom組件不再在react-router中引入,而是在react-router-dom中引入

2.不再使用<Router history={}>來定義history屬性,4.0加入了BroswerRouter和HashRouter組件,引入時可以import {BrowserRouter as Router} from ‘react-router-dom‘ 來引入

3.<Router>組件下只能有一個單獨的節點,類似render return下,只能有一個父節點,並且Router下的單一父節點下,現在可以放入其他組件,不一定是Route組件了。

4.<Route>組件增加了exact屬性,添加了這個屬性之後,如這個組件path=‘/one‘,則不會再匹配url=‘/one/two‘的路由地址

5.<Route>下增加子路由會報錯,現在<Route>下不能添加子路由,如果想要添加子路由,則到該路由下匹配的組件中添加<Route>

6.react-router中不再有BrowserHistory,要在js中進行路由跳轉,不依賴Link,需要使用contextTypes越級傳遞router,使用router下的方法在js中進行路由跳轉,並且在新版react中,PropTypes不再存在於React下,需要單獨從prop-types中引入,具體實現方法如下

import React,{Component} from ‘react‘
import PropTypes from ‘prop-types‘

class Example from Component {
       constructor(props){
                super(props)
                this.clickHandle = this.clickHandle.bind(this)
        }    
        clickHandle(){
            this.context.router.history.push(url)
        }    
        render(){
                
return( <div> <button onClick={this.clickHandle}></button> </div> } } Example.contextTypes = { router:PropTypes.object } export default Example

暫時遇到的問題是這些,後續遇到問題會再繼續補充

react-router 4.0踩到的坑