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

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

源碼

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

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

                

                    首頁(yè)
                    文章
                    我的
                
                

                
                     ({render: () => 
首頁(yè)
})}>
                     ({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 (
            

                

                    首頁(yè)
                    文章
                    location.pathname==="/mine"}>我的
                
                

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

let MyApp = withRouter(App)

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

效果

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

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

源碼

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

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

                

                    首頁(yè)
                    文章
                    我的
                
                

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

效果
當(dāng)我們?cè)L問http://localhost:8081/時(shí)，會(huì)自動(dòng)跳轉(zhuǎn)到http://localhost:8081/index

源碼

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

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

                

                    首頁(yè)
                    文章
                    我的
                
                

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

效果

源碼

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 (
            

                

                    首頁(yè)
                    文章1
                    文章2
                    我的
                
                

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

效果

說明
聲明Route的時(shí)候使用:${name}表示要作為動(dòng)態(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

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

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

                
article
}>
                
:name
}>
            
        )
    }
}

此時(shí)看效果

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

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

                
                     
article
}>
                     
:name
}>
                
            
        )
    }
}

命中/article

命中/:name

源碼