React-router总结

<BrowserRouter/>   
<HashRouter/>
<Route/>
<Switch/>
<Redirect/>
<Link/> (<NavLink/>)
withRouter

<BrowserRouter>
   <Link to="/">主页</Link>
   <Link to="/recommend">推荐</Link>
   <Link to="/detail/1">详情</Link>

   <Route path="/" exact component={Home}/>
   <Route path="/detail/:id" exact component={Detail}/>
   <Route path="/recommend" exact component={Recomm}/>
</BrowserRouter>

<Link to=‘/path‘ />
<Link to={
   pathname, // 路径，即 to 的字符串用法
   search,  // search
   hash,  // hash
   state,  // state 对象
   action,  // location 类型，在点击 Link 时为 PUSH，浏览器前进后退时为 POP，调用 
   replaceState 方法时为 REPLACE
   key,  // 用于操作 sessionStorage 存取 state 对象
} />
<Link to=‘/path‘ replace={true} /> // 覆盖当前路径

// 渲染目标
component // 渲染组件
render  
children

// 地址匹配
path
<Route path="/hello/:name"> 
name为参数名，可以在其渲染组件中获取 this.props.params.name
<Route path="/files/*.*">
匹配 /files/hello.jpg  、   /files/hello.html
<Route path="/files/*">
匹配 /files/  、 /files/a   、 /files/a/b

exact  // 完全匹配的意思，排他

<Redirect to=‘/path‘ />

message： 字符串/函数，离开页面时的提示信息
when：布尔值，通过设定条件决定是否启用该组件

<Prompt message="您确定要离开该页面吗?" when={this.state.isOpen} />
<Prompt
   message = {() => {this.state.isOpen? false: "您确定要离开该页面吗?"}}
/>

length: number   浏览历史堆栈中的条目数
action: string   路由跳转到当前页面执行的动作，分为 PUSH, REPLACE, POP
location: object   当前访问地址信息组成的对象，具有如下属性：
pathname: string   URL路径
search: string   URL中的查询字符串
hash: string   URL的 hash 片段
state: string   例如执行 push(path, state) 操作时，location 的 state 将被提供到堆栈信息里，state 只有在 browser 和 memory history 有效。
push(path, [state])   在历史堆栈信息里加入一个新条目。
replace(path, [state])   在历史堆栈信息里替换掉当前的条目
go(n)   将 history 堆栈中的指针向前移动 n。
goBack()   等同于 go(-1)
goForward   等同于 go(1)
block(prompt)   阻止跳转

{
  hash: ‘#sdfas‘,
  key: ‘sdfad1‘
  pathname: ‘/about‘,
  search: ‘?name=minooo‘
  state: {
    price: 123
  }
}

<Link to={location} />
<NaviveLink to={location} />
<Redirect to={location />
history.push(location)
history.replace(location)

params: object 路径参数，通过解析 URL 中的动态部分获得键值对
isExact: bool 为 true 时，整个 URL 都需要匹配
path: string 用来匹配的路径模式，用于创建嵌套的 <Route>
url: string URL 匹配的部分，用于嵌套的 <Link>

//路由设置
<Route path=‘ /user/:id ‘   component={User} />
// 传值
<Link to=‘/user/2‘ />
this.props.history.push("/user/2");
// 获取值
this.props.match.params.id

//路由设置
<Route path=‘ /user ‘   component={User} />
// 传值
<Link to=‘/user?id=2‘ />
this.props.history.push("/user?id=2");
// 获取值
this.props.location.seacrh // 获得"?id=2"，将其进行拆解即可获得

// 路由设置
<Route path=‘ /user ‘   component={User}></Route>
// 传值
<Link to={{ pathname:‘ /user‘,state:{id:123},search:‘?sort=name‘,hash:‘#the-hash‘}}> 
this.props.history.push({pathname:‘ /user‘,state:{id:123},search:‘?sort=name‘,hash:‘#the-hash‘});
// 获取值
this.props.location.state.id

// 路由设置
<Route path=‘ /user ‘   component={User}></Route>
// 传值
<Link to={{ pathname:‘ /user‘,abc:{id:123},search:‘?sort=name‘,hash:‘#the-hash‘}}> 
this.props.history.push({pathname:‘ /user‘,abc:{id:123},search:‘?sort=name‘,hash:‘#the-hash‘});
// 获取值
this.props.location.abc.id

// 路由配置
const routerConfig = [
    {
        path:‘/‘,
        component:HomePage,
        auth:false, 
    },{
        path:‘/home‘,
        component:HomePage,
        auth:true, // 表示必须登录才能访问
    },{
        path:‘/login‘,
        component:LoginPage,
    },{
        path:‘/404‘,
        component:ErrorPage
    }
];

class RouterTab extends React.Component{
    render(){
        return(
            <HashRouter>
                <Switch>
                    <RouteGenerator config={routerConfig} />
                </Switch>
            </HashRouter>
        );
    }
}

class RouterGenerator extends React.Coponent{
   // 在这里定义限制路由的逻辑（业务场景1）
   render(){
      const routeConf = this.props.config;
      routeConf.map((conf)=>{
         if(conf.auth) // 判断该路由是否满足渲染条件
         {
            if(login) // 判断当前有没有登录
            {
               retrun <Route path={conf.path} component={conf.component} exact={conf.exact?true:false} />
            }
         }else
         {
            retrun <Route path={conf.path} component={conf.component} exact={conf.exact?true:false} />
         }
      });
   }
}

// 将此高阶组件修饰所有需要被守卫的路由组件
const routerGuard = (RouteConfig) => {
   retrun (WrappedComponent) => {
      rentrun class NewComponent extends React.Component {

         componentWillMount(){
            const path = this.props.location.pathname;
            const config = RouteConfig.find(f => f.path === path);
            if(!config)
            {
               this.props.history.push("/404");
            }
            if(config.auth && !login)
            {
               this.props.history.push("/login");
            }
         }

         render(){
            retrun(
               <WrappedComponent {...this.props} />
            )
         }
      }
   }
}