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 (
              <div>
                  <div>
                      <Link to='/index'>首页</Link>
                      <Link to='/article'>文章</Link>
                      <Link to='/mine'>我的</Link>
                  </div>
                  <hr/>
                  <Switch>
                      <Route path='/index' component={() => ({render: () => <p>首页</p>})}></Route>
                      <Route path='/article' component={() => ({render: () => <p>文章</p>})}></Route>
                      <Route path='/mine' component={() => ({render: () => <p>我的</p>})}></Route>
                  </Switch>
              </div>
          )
      }
  }
  
  let MyApp = withRouter(App)
  
  ReactDom.render(
      <BrowserRouter>
          <MyApp/>
      </BrowserRouter>,
      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 (
              <div>
                  <div>
                      <NavLink  to='/index' activeStyle={{ color:'#eeeeee'}} >首页</NavLink>
                      <NavLink to='/article'  activeClassName='active'>文章</NavLink>
                      <NavLink to='/mine'  activeStyle={{ color:'#eeeeee'}} isActive={(match,location)=>location.pathname==='/mine'}>我的</NavLink>
                  </div>
                  <hr/>
                  <Switch>
                      <Route path='/index' component={() => ({render: () => <p>首页</p>})}></Route>
                      <Route path='/article' component={() => ({render: () => <p>文章</p>})}></Route>
                      <Route path='/mine' component={() => ({render: () => <p>我的</p>})}></Route>
                  </Switch>
              </div>
          )
      }
  }
  
  let MyApp = withRouter(App)
  
  ReactDom.render(
      <BrowserRouter>
          <MyApp/>
      </BrowserRouter>,
      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 (
            <div>
                <div>
                    <NavLink to='/index'>首页</NavLink>
                    <NavLink to='/article'>文章</NavLink>
                    <NavLink to='/mine'>我的</NavLink>
                </div>
                <hr/>
                <Switch>
                    <Route path='/index' component={() => ({render: () => <p>首页</p>})}></Route>
                    <Route path='/article' component={() => ({render: () => <p>文章</p>})}></Route>
                    <Route path='/mine' component={() => ({render: () => <p>我的</p>})}></Route>
                    <Redirect from="/" to="/index"/>
                </Switch>
            </div>
        )
    }
}
```

• 效果
  当我们访问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 (
              <div>
                  <div>
                      <NavLink to='/index'>首页</NavLink>
                      <NavLink to='/article'>文章</NavLink>
                      <NavLink to='/mine'>我的</NavLink>
                  </div>
                  <hr/>
                  <Switch>
                      <Route path='/index' component={() => ({render: () => <p>首页</p>})}></Route>
                      <Route path='/article' component={() => ({render: () => <p>文章</p>})}></Route>
                      <Route path='/mine' component={() => ({render: () => <p>我的</p>})}></Route>
                      <Route component={() => ({render: () => <p>未找到这个页面</p>})}/>
                  </Switch>
              </div>
          )
      }
  }

• 效果

  

0x005 url传参

• 源码

  import {BrowserRouter, Switch, Route, NavLink, withRouter} from 'react-router-dom'
  
  class Article extends React.Component{
      render(){
          return(<p>{this.props.match.params.id}</p>)
      }
  }
  class App extends React.Component {
      render() {
          return (
              <div>
                  <div>
                      <NavLink to='/index'>首页</NavLink>
                      <NavLink to='/article/1'>文章1</NavLink>
                      <NavLink to='/article/2'>文章2</NavLink>
                      <NavLink to='/mine'>我的</NavLink>
                  </div>
                  <hr/>
                  <Switch>
                      <Route path='/index' component={() => ({render: () => <p>首页</p>})}></Route>
                      <Route path='/article/:id' component={Article}></Route>
                      <Route path='/mine' component={() => ({render: () => <p>我的</p>})}></Route>
                  </Switch>
              </div>
          )
      }
  }
  
  

• 效果
  
• 说明
  声明Route的时候使用:${name}表示要作为动态参数，之后可以通过this.props.match.params.${name}获取

0x006 页面手动跳转并传参

• 源码

  class Article extends React.Component{
      render(){
          console.log(this)
          return(<p>文章 id:{this.props.location.state.id}</p>)
      }
  }
  class App extends React.Component {
      render() {
          return (
              <div>
                  <div>
                      <button className='btn btn-primary' onClick={()=>{this.props.history.push('/article',{id:1})}}>文章1</button>
                      <button className='btn btn-primary'  onClick={()=>{this.props.history.push('/article',{id:2})}}>文章2</button>
  
                  </div>
                  <hr/>
                  <Switch>
                      <Route path='/article' component={Article}></Route>
                  </Switch>
              </div>
          )
      }
  }
  

• 效果

  

• 说明：

  • 跳转：this.props.history.push(path:String,data:?Object)
  • 获取参数：this.props.location.state

0x007 何时使用Switch

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

class App extends React.Component {
    render() {
        return (
            <div>
                <Route path='/article' component={()=><p>article</p>}></Route>
                <Route path='/:name' component={()=><p>:name</p>}></Route>
            </div>
        )
    }
}

此时看效果

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

class App extends React.Component {
    render() {
        return (
            <div>
                <Switch>
                    <Route path='/article' component={() => <p>article</p>}></Route>
                    <Route path='/:name' component={() => <p>:name</p>}></Route>
                </Switch>
            </div>
        )
    }
}

• 命中/article
  
• 命中/:name
  

0x008 资源

• 源码