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

0x000 概述

这一章仔细讲一讲 react-route 的使用栗子

0x001 简单使用

• 源码

  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')
  )

• 效果

0x002 带导航激活效果

• 源码

  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

  0x003 重定向

• 源码

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

0x004 没找到匹配的路由

• 源码

  import {BrowserRouter, Switch, Route, NavLink, withRouter} from 'react-router-dom'
  
  class App extends React.Component {
      render() {
          return (
              
  
                  
  
                      首页
                      文章
                      我的
                  
                  
  
                  
                       ({render: () => 
  首页
  })}>
                       ({render: () => 
  文章
  })}>
                       ({render: () => 
  我的
  })}>
                       ({render: () => 
  未找到这个页面
  })}/>
                  
              
          )
      }
  }

• 效果

0x005 url传参

• 源码

  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}获取

0x006 页面手动跳转并传参

• 源码

  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

0x007 何时使用Switch

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

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

                
article
}>
                
:name
}>
            
        )
    }
}

此时看效果

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

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

                
                     
article
}>
                     
:name
}>
                
            
        )
    }
}

• 命中/article
  
• 命中/:name
  

0x008 资源

• 源码