React-router-dom使用入门

  • 路由组件

    React-router-dom中提供的路由组件
    BrowserRouter // history模式路由组件
    HashRouter // hash模式路由组件
    NavLink // 声明式跳转组件,可以通过activeClassName(string)和activeStyle(Object)设置激活样式,to:string/Object
    Link // 声明式跳转组件; to: string/object,要跳转的路由路径
    Route // 路由匹配组件,path: 路由路径;exact严格匹配;component:组件,render函数返回一个组件的调用
    Reirect // 重定向组件
    Switch // 排他性组件
    Prompt // 后置守卫 when为true时阻止,message可以是简单的提示语,也可以是一个函数
    前置后卫通过自定一个组件,使其返回一个Route组件
    
  • 路由传参

    参数数据: {history,location,match} = props;
    传递: to={{pathname: '',search:'?a=',hash:'#a1}}
    
  • 编程式跳转

    history.push('';
    history.push({pathname:'',search:'?a=11&b=12'});
    history.replace({pathname:'',search:'?a=12'});
    history.go(-1)
    

你可能感兴趣的:(React)