Router入门0x204: react-route简单栗子

摘要：概述这一章仔细讲一讲的使用栗子简单使用源码简单使用首页文章我的首页文章我的效果带导航激活效果源码带导航效果首页文章我的首页文章我的效果说明增强版，如果当前路由命中，将会启用或者。

这一章仔细讲一讲 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"
// 带导航效果
class App extends React.Component {
    render() {
        return (
            

                

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

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

let MyApp = withRouter(App)

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

效果

说明
NavLink: Link增强版，如果当前路由命中，将会启用activeStyle或者activeClassName。

- activeStyle:?Object: 当链接激活的时候的样式
- activeClassName:?String: 当链接激活的时候的样式类
- isActive?Function: 可以手动判断该链接是否激活，该函数的签名是：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: () => 
我的
})}>
                    
                
            
        )
    }
}
```

效果
当我们访问http://localhost:8081/时，会自动跳转到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}表示要作为动态参数，之后可以通过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

                
                

                
                    
                
            
        )
    }
}

效果

说明：

跳转：this.props.history.push(path:String,data:?Object)

获取参数：this.props.location.state

做个试验，假设我们有两个路由：

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

                
article
}>
                
:name
}>
            
        )
    }
}

此时看效果

会发现两个都命中了，这个时候可以使用Switch，他只会命中第一个命中的路由

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

                
                     
article
}>
                     
:name
}>
                
            
        )
    }
}

命中/article

命中/:name

源码