摘要：概述這一章仔細(xì)講一講的使用栗子簡單使用源碼簡單使用首頁文章我的首頁文章我的效果帶導(dǎo)航激活效果源碼帶導(dǎo)航效果首頁文章我的首頁文章我的效果說明增強(qiáng)版，如果當(dāng)前路由命中，將會啟用或者。

這一章仔細(xì)講一講 react-route 的使用栗子

源碼

import React from "react"
import ReactDom from "react-dom"
import {BrowserRouter, Switch, Route, Link, withRouter} from "react-router-dom"

// 簡單使用
class App extends React.Component {
    render() {
        return (
            

                

                    首頁
                    文章
                    我的
                
                

                
                     ({render: () => 
首頁
})}>
                     ({render: () => 
文章
})}>
                     ({render: () => 
我的
})}>
                
            
        )
    }
}

let MyApp = withRouter(App)

ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

效果

源碼

import React from "react"
import ReactDom from "react-dom"
import {BrowserRouter, Switch, Route, NavLink, withRouter} from "react-router-dom"
import "./App.css"
// 帶導(dǎo)航效果
class App extends React.Component {
    render() {
        return (
            

                

                    首頁
                    文章
                    location.pathname==="/mine"}>我的
                
                

                
                     ({render: () => 
首頁
})}>
                     ({render: () => 
文章
})}>
                     ({render: () => 
我的
})}>
                
            
        )
    }
}

let MyApp = withRouter(App)

ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

效果

說明
NavLink: Link增強(qiáng)版，如果當(dāng)前路由命中，將會啟用activeStyle或者activeClassName。

- activeStyle:?Object: 當(dāng)鏈接激活的時候的樣式
- activeClassName:?String: 當(dāng)鏈接激活的時候的樣式類
- isActive?Function: 可以手動判斷該鏈接是否激活，該函數(shù)的簽名是：function(match, location):boolean

源碼

import {BrowserRouter, Switch, Route, NavLink, Redirect, withRouter} from "react-router-dom"

class App extends React.Component {
    render() {
        return (
            

                

                    首頁
                    文章
                    我的
                
                

                
                     ({render: () => 
首頁
})}>
                     ({render: () => 
文章
})}>
                     ({render: () => 
我的
})}>
                    
                
            
        )
    }
}
```

效果
當(dāng)我們訪問http://localhost:8081/時，會自動跳轉(zhuǎn)到http://localhost:8081/index

源碼

import {BrowserRouter, Switch, Route, NavLink, withRouter} from "react-router-dom"

class App extends React.Component {
    render() {
        return (
            

                

                    首頁
                    文章
                    我的
                
                

                
                     ({render: () => 
首頁
})}>
                     ({render: () => 
文章
})}>
                     ({render: () => 
我的
})}>
                     ({render: () => 
未找到這個頁面
})}/>
                
            
        )
    }
}

效果

源碼

import {BrowserRouter, Switch, Route, NavLink, withRouter} from "react-router-dom"

class Article extends React.Component{
    render(){
        return(
{this.props.match.params.id}
)
    }
}
class App extends React.Component {
    render() {
        return (
            

                

                    首頁
                    文章1
                    文章2
                    我的
                
                

                
                     ({render: () => 
首頁
})}>
                    
                     ({render: () => 
我的
})}>
                
            
        )
    }
}

效果

說明
聲明Route的時候使用:${name}表示要作為動態(tài)參數(shù)，之后可以通過this.props.match.params.${name}獲取

源碼

class Article extends React.Component{
    render(){
        console.log(this)
        return(
文章 id:{this.props.location.state.id}
)
    }
}
class App extends React.Component {
    render() {
        return (
            

                

                    {this.props.history.push("/article",{id:1})}}>文章1
                    {this.props.history.push("/article",{id:2})}}>文章2

                
                

                
                    
                
            
        )
    }
}

效果

說明：

跳轉(zhuǎn)：this.props.history.push(path:String,data:?Object)

獲取參數(shù)：this.props.location.state

做個試驗，假設(shè)我們有兩個路由：

class App extends React.Component {
    render() {
        return (
            

                
article
}>
                
:name
}>
            
        )
    }
}

此時看效果

會發(fā)現(xiàn)兩個都命中了，這個時候可以使用Switch，他只會命中第一個命中的路由

class App extends React.Component {
    render() {
        return (
            

                
                     
article
}>
                     
:name
}>
                
            
        )
    }
}

命中/article

命中/:name

源碼