react基础知识-9.react-router

9.1 安装

npm install react-router-dom -s

9.2 基本使用

react-router中奉行一切皆组件的思想，以下都是以组件形式存在

路由器-Router
链接-Link
路由-Route
独占-Switch
重定向-Redirect

import React,{Component} from "react"
import {BrowserRouter as Router,Route,Link} from "react-router-dom"

export default class RouterPage extends Component{
  render(){
    return(
      <div>
        <h3>RouterPage</h3>
        <Router>
          <Link to="/">首页</Link>
          <Link to="/user">用户中心</Link>
        {/* 根据exact,实现精准匹配 */}
        <Route 
          exact 
          path="/" 
          component ={HomePage}
          // children ={()=><div>children</div>}
          // render ={()=><div>render</div>}
        />
        <Route path="/user" component = {UserPage}/>
        </Router>
      </div>
    )
  }
}

class HomePage extends Component{
  render(){
    return(
      <div>
        <h3>HomePage</h3>
      </div>
    )
  }
}

class UserPage extends Component{
  render(){
    return(
      <div>
        <h3>UserPage</h3>
      </div>
    )
  }
}

9.3 Route渲染内容的三种方式

Route渲染优先级:children>component>render
这三种方式互斥，你只能用其中一种

• children:func

有时候，不管location是否匹配，你都需要渲染一些内容，这个时候你可以用 children，除了不管location是否匹配都会渲染之外，其他方法和render完全一样

• render:func

当你使用render时，你只是调用了个函数，只有当location匹配的时候渲染

• component:component

只有当location匹配的时候渲染

9.4 404页面

设定一个没有path的路由在路由列表最后面,表示一定匹配

import React,{Component} from "react"
import {BrowserRouter as Router,Route,Link,Switch} from "react-router-dom"

export default class RouterPage extends Component{
  render(){
    return(
      <div>
        <h3>RouterPage</h3>
        <Router>
          <Link to="/">首页</Link>
          <Link to="/user">用户中心</Link>
        {/* 根据exact,实现精准匹配 */}
          <Switch>
            <Route 
              exact 
              path="/" 
              component ={HomePage}
              // children ={()=><div>children</div>}
              // render ={()=><div>render</div>}
            />
            <Route path="/user" component = {UserPage}/>
            <Route component = {EmptyPage}/>
          </Switch>
        </Router>
      </div>
    )
  }
}

class HomePage extends Component{
  render(){
    return(
      <div>
        <h3>HomePage</h3>
      </div>
    )
  }
}

class UserPage extends Component{
  render(){
    return(
      <div>
        <h3>UserPage</h3>
      </div>
    )
  }
}

class EmptyPage extends Component{
  render(){
    return(
      <div>
        <h3>EmptyPage-404</h3>
      </div>
    )
  }
}

代码下载地址:https://gitee.com/JingYaBei/my-app.git