react-router基本使用

react-router包括 路由器Router 链接Link 路由Router 独占Switch 重定向Redirect

RouterPage.js

import React,{ Component} from "react"
import {BrowerRouter,Link,Route} from "react-router-dom"
import HomePage from "./HomePage"
import UserPage from "./UserPage"
export default class RouterPage extends Component{
  render(){
    return(
     <div>
      <h1>RouterPage</h1>
      <BrowerRouter>
        <nav>
          <Link to="/">首页</Link>
          <Link to="/user">用户中心</<Link>
        </nav>
        // exact 精确匹配
        <Route exact path="/" component={HomePage} />
        <Route exact path="/user" component={UserPage} />
      </BrowerRouter>
      
     
     </div>
    )
  }
}

Route渲染内容的三种方式

分别是 children component render

优先级是 children>component>render

children的类型为func 不管类型是否匹配 内容都会被渲染

动态路由

 // 定义路由
<Route path="/search/:id" component={Search} />

添加导航链接
<Link to={"/search/"+searchId} >搜索</Link>

// 创建Search组件并获得参数
function Search({match,history,location}){
  const {id}=match.params;
  return (
    <div>
      <h1>Search:{id}</h1>
    </div>
  )

}

路由守卫

思路： 创建高阶组件包装route使其具有权限判断功能

 import React,{Component} from "react"
 import {Route,Rediret} from "react-router-dom"
 export deafult class PrivateRoute extends Component{
   render(){
     const 	{isLogin,path,component}=this.props;
     if(isLogin){
       return <Route path={path} component={component} />
       
     }else{
       return <Redirect to={{pathname:"/login"},state:{redirect:path}} />;
     }
   }
 }
 
 //创建LoginPage.js
 import React,{Component} from "react"
 import {Redirect} from "react-router-dom"
 export default class LoginPage extends Component{
   render(){
    const {isLogin,location}=this.props;
    const {redirect="/"}=location.state||{};
    if(isLogin){
      return <Redirect to={redirect} />
     }else{
       return (
         <div>
           <h3>LoginPage</h3>
           <button onClick={()=>{}}>click</button>
         </div>
        )
     }
   }
 }
 
 在RouterPage.js配置路由 RouterPage
 <Route exact path="/login" component={LoginPage}/>
 <PrivateRoute path="/user" component={UserPage}