<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,  // searchhash,  // hashstate,  // state 对象action,  // location 类型，在点击 Link 时为 PUSH，浏览器前进后退时为 POP，调用 replaceState 方法时为 REPLACEkey,  // 用于操作 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/bexact  // 完全匹配的意思，排他

<Redirect to='/path' />

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

<Prompt message="您确定要离开该页面吗?" when={this.state.isOpen} />
<Promptmessage = {() => {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} />)}}}
}