第二章react16.8全家桶從入門到實戰(zhàn)5節(jié)及原理解析lesson5-router

Router使用及原Routerreact-router資react-react-react-用）或react-router-native（在rn中使用）。react-dom和actouer-nae都依賴ectoute，所以在安裝時，ectroute也會自動安裝，創(chuàng)建eb安npmnpminstall--savereact-router-創(chuàng)建importReact,{Component}from"react";import{BrowserRouter,Link,Route}fromimportHomePagefrom"./HomePage";importUserPagefromexportdefaultclassRouterPageextendsComponent{{return<Linkto="/">首頁<Linkto="/user">用戶中心{/*根路由要添加exact，實現(xiàn)精確匹配<Route<Routeexactpath="/"{HomePage}<Routepath="/user"{UserPage}}}<Route<Routepath="/search/:id"component={Search}添加導(dǎo)航<Link<Linkto={"/search/searchId}>搜索創(chuàng)建Search組件并獲取參數(shù)importimportReact,{Component}from"react";import{BrowserRouter,Link,Route}fromimportHomePagefromimportUserPagefromfunctionSearch({match,history,location{const{id}=match.params;return(<h1>Search:}exportdefaultclassRouterPageextendsComponent{render()constsearchId="1234";return(<Linkto="/">首頁<Linkto="/user">用戶中心<Linkto={"/search/searchId}>索

{/*根路由要添加exact，實現(xiàn)精確匹配<Routeexactpath="/"{HomePage}<Route<Routepath="/user"{UserPage}<Routepath="/search/:id"{Search}}}嵌functionfunction{return}functionSearch({match,history,location{const{id}=match.params;return(<h1>Search:<Linkto="/search/add">新增<Linkto={"/search/detail/id}><Routepath="/search/add"=><h1>add</h1>}<Routepath={"/search/detail/:"+id}component={Detail}/>}404{{/*添加Switch表示僅匹配一個{/*根路由要添加exact，實現(xiàn)精確匹配<Routeexactpath="/"component={HomePage}<Routepath="/user"component={UserPage}<Routepath="/search/:id"<Routecomponent={()=><h1>404</h1>}importReact,{Component}from"react";import{Route,Redirect}from"react-router-import{connect}from"react-classPrivateRouteextends{render()const{path,component,isLogin}=if(isLogin)return<Routepath={path}{component}}{returnpathname:"/login",state:{redirect:path},}}}}exportdefaultconnect(state=>創(chuàng)建importReact,{Component}from"react";import{Redirect}from"react-router-dom";import{connect}from"react-redux";classLoginPageextends{render()const{isLogin,login,location}=const{redirect="/"}=||if(isLogin)return<Redirectto={redirect}}return<button}}exportdefaultexportdefaultconnect(state=>{login:()=>type:<Route<Routeexactpath="/login"{LoginPage}<PrivateRoutepath="/user"importimport{createStore,combineReducers}constinitalUserInfo{isLogin:user:name: functionloginReducer(state=...initalUserInfo},action)switch{casereturn{...initalUserInfo};case"loginSuccess":return{...state,isLogin:true};case"loginFailure":return{...state,isLogin:true};return{...state}}conststorecreateStore(combineReducers({user:loginReducer,exportdefaultimportReactfrom"react";importReactDOMfrom"react-dom";import"./index.css";importAppfromimport{Provider}from"react-redux";importstorefrom"./store";<Provider<App importimportReact,{Component}from"react";import{connect}from"react-redux";classUserPageextends{render()const{logout}=ps;return(<buttononClick={logout}>退出登}}}exportdefaultconnect(state=>{logout:()=>type:與HashRouterHashRouter最簡單，不需要服務(wù)?端渲染，靠瀏覽?的#的來區(qū)分path就可以，BrowserRouter需要服務(wù)?端對不BrowserRouter使用HTML5歷史API（pushState，receState和popstate），讓頁面的UI同步HsRuter不支持ocaony和ocaonsae，動態(tài)路由跳轉(zhuǎn)需要通過?傳遞參數(shù)。Hashhistory不需要服務(wù)?任何配置就可以運行，如果你剛剛，那就使用它吧。但是我們不推薦在實際線上環(huán)境中用到它，因為每一個web應(yīng)用都應(yīng)該渴望使用拓BrowserRouter、Route、實現(xiàn)創(chuàng)建測試頁面importReact,{Component}from"react";import{BrowserRouter,Link,Route}fromimportHomePagefromimportUserPagefromexportdefaultclassMyRouterPageextendsComponent{{(<Linkto="/">首頁<Linkto="/user">用戶中心<Route<Routepath="/"exact{HomePage}<Routepath="/user"{UserPage}}}import{createBrowserHistory}fromconstRouterContext=React.createContext();classBrowserRouterextendsComponent{{this.history=this.state=location:this.unlisten=this.history.listen(location=>{this.setState({location}componentWillUnmount()if(this.unlisten)}{returnchildren={ps.children||null}history:this.history,location:this.state.location}實現(xiàn)exportexportfunctionRoute(props)constctx=useContext(RouterContext);const{path,component:Cmp}=props;const{location}=ctx;letmatch=path===location.pathname;returnmatch?<Cmp/>:null;}實現(xiàn)