开课吧web全栈架构师第16期2020完结04router实现及内容回顾lesson4react全家桶

React全家桶课堂basename:stringbasename:stringto:stringto: ce:boolto:stringto:Routerendermethodspath:stringlocation:location:objectchildren:node深入理解RouterReact中文Router-搭建cra使用HTML5提供的historypushState 和URL的同步basename:

录，则需要将其设置为子目录。basename的格式是前面有<BrowserRouter<BrowserRouter<Linkto="/user"上例中 最终将被呈现为<a<ahref="/kkb/user"使用URL

部分（window.location.hash）UIURLbasename:<HashRouter<HashRouter<Linkto="/user"上例中 最终将被呈现为<a<ahref="#/kkb/user"注意：hashhistory不支 location.state。在以前的版本中，我们曾尝试shim。BrowserRouter与HashRouter对比BrowserRouter使用HTML5historyAPI（pushState，receState和popstate），让页面的UI于URL同HashRouter不支持location.y和location.state由跳转需要通过传递参数。browserHistoryHashhistory不需要服务器任何配置就可以运行，如果你境中用到它，因为每一个browserHistory把URL的历史记录保存在内存中的<Router>（不、不importimport{MemoryRouter}from'react-<Appto: 地址，通过pathname、search和<Link<Linkto='/courses?sort=name'to:一个对象形式 地址，可以具有以下任何属性-要到的路-URL中的hash，例如#the--到location中的额外状态数<Link<Linkpathname:'/courses',search:'?sort=name',hash:'#the-hash',state:{redirect:}}}rece:

时，点 后将替换历史堆栈中的当前目，而不是添加新条目。默认为false<Link<Linkto="/courses"ce你还可以传递一些其它属性，例如title、id或<Link<Linkto="/"className="nav"title="ato:URLpath-to-regex有效的URL路径。所有要使用的URL参数必须由 <Redirect<Redirectto="/somewhere/else"to:能够理解的任何有效的URL路径

可以是path-to-<Redirect<Redirectto={{pathname:'/login',search:'?utm=your+face',state:{referrer:}}}

进行。

进行。

可能是ReactRouter助你理解和学习如何更好的使用ReactRouter

属性与某个location匹配时呈现一些UIRouterender使 渲染一些内容有以下三种方式render:funcchildren:funcpath:

path-to-regexURL<Route<Routepath="/users/:id"component={User}没有定 总是会被匹配location:<Route>

与当前location（通常是当前的浏览器URL）进行匹配。但是，带

的进行匹配时，会发现这个api非常有用。如过渡动画

的location相匹配（或者是当前的location），

所有Router组件的通用低阶接口。通常情况下，应用程序只会使用其中一个高阶Router：用于渲染与路径匹配的第一个 或<Redirect>这与仅仅使用一系 有何不同

<Route<Routepath="/about"component={About}<Routepath="/:user"component={User}<Routecomponent={NoMatch}URL是/about，那么<About>、<User>设计，允许我们以很多方式 组合成我们的应用序，例如侧边栏和面包屑、引 等

在URL

时不想匹配/:user（404页面），这该怎么实现呢？以下就是如何使用importimport{Switch,Route}from'react-<Routeexactpath="/"component={Home}<Routepath="/about"component={About}<Routepath="/:user"component={User}<Routecomponent={NoMatch}现在，当我们 路径时，<Switch>将开始寻找配的<Route><Routepath="/about会被正确匹配，这 会停止查找匹配项并立即现<About>。同样，如果我们在

{/*这里只会渲染一个子元素<Route<Route<Route<Route{/*这里总是会渲染两个子元素，也有可能是空渲染，这使得转换更加麻烦*/}location:用于匹配子元素而不是当前historylocation（通常是当前的浏览器URL）的location对象。<Switchlocation={{pathname:<Routeexactpath="/"{HomePage}<Routepath="/user"{UserPage}{/*<PrivateRoutepath="/user"component={UserPage}/>*/}<Routepath="/login"{LoginPage}<Routepath="/children"=><div>children</div>}<Routepath="/render"render={()<div>render</div>}<Routepath="/search/:id" ponent}

的子元素都应该 <Redirect>

当在<Switch>中包含<Redirect>时，你可以使用任<Route>拥有的路径匹配属性path、exactstrict。from只是path的别名如果给<Switch>提供一的子元素上的location属性

属性，它将覆盖匹<Routeexactpath="/"component={Home}<Routepath="/users"component={Users}<Redirectfrom="/accounts"to="/users"<Routecomponent={NoMatch}实测试代码importimportReactfrom//import{BrowserRouterasRouter,Route,Link,Switch}from"react-router-dom";import{BrowserRouterasRouter}from"./k-importRoutefrom"./k-react-router-importLinkfrom"./k-react-router-importimportSwitchfrom"./k-react-router-importHomePagefrom"./pages/HomePage";importUserPagefrom"./pages/UserPage";importLoginPagefrom"./pages/LoginPage";importPrivateRoutefromfunctionApp(){return(<div<Linkto="/">首页<Link<Linkto="/login">登录<Link<Link<Linkto="/search/123">搜索-动态路{/*<Switchlocation={{pathname:<Routeexactpath="/"{HomePage}{{/*<Routepath="/user"{UserPage}/><PrivateRoutepath="/user"{UserPage}<Routepath="/login"{LoginPage}<Routepath="/children"=><div>children</div>}<Routepath="/render"render={()<div>render</div>}<Routepath="/search/:id" ponent}}exportdefaultponent(props)const{id}=return(ponent-props",ponent-<Linkto={"/search/"+id+"/detail"}>情-嵌套路由<Route<Routepath={"/search/:id/detail"} ponent}/>}ponent(props)const{id}=return<div>}ponent-props",实现实现importimportReact,{Component}fromimport{createBrowserHistory}from"history";importmatchPathfrom"./matchPath";constRouterContext=exportclassBrowserRouterextendsComponentconstructor(props)this.state={};this.history=createBrowserHistory();this.state={location:this.unlisten=this.history.listen(location=>{location:location}componentWillUnmount(){if(this.unlisten){}}render(){returnvalue={{history:location:}}}实现exportexportclassRouteextendsComponent{render(){return{context=>//优先从props中取constlocation=||//优先从props中取值计constmatch :?:context.match;constprops={let{path,children,component,render}=ps;matchcomponentrender或者不match，渲染children或者nullreturn(<RouterContext.Provider

??typeofchildren?::?React.createElement(component,:?::typeofchildren

?:}}}实现Link.js:跳 ，处理点exportexportclassLinkextendsComponent{staticcontextType=RouterContext;handleClick=event=>{render()const{to}=ps;return(<ahref={to}}}实现exportclassexportclassSwitchextendsComponentrender(){return{context=>constlocation=context.location;letelement,match;child=>{if(match==null&&React.isValidElement(child)){element=constpath=ps.path;match=path?{...ps,:}returnmatchReact.cloneElement(element,{location}):}}实现importReact,{Component}fromimport{RouterContext}fromexportdefaultclassRedirectextends{render(){return{context=>const{history}=context;const{to}=ps;//history.push(location)return<LifeCycleonMount={()=> ce(to)}}}classLifeCycleextendsComponent{componentDidMount(){if(ps.onMount){