React - React 配置代理、搜索案例（Fetch + PubSub）、React 路由基本使用、NavLink

一、React 配置代理1、在package.json文件中配置代理1具体实现package.jsonproxy:http://localhost:5000App.jsximportReact,{Component}fromreact;importaxiosfromaxios;exportdefaultclassAppextendsComponent{getStudentData(){axios.get(/students).then((response){console.log(成功了,response.data);},(error){console.log(失败了,error);},);};render(){return(divbutton onClick{this.getStudentData}点我获取学生数据/button/div);}}2小结工作方式当请求了 3000 不存在的资源时那么该请求会转发给5000优先匹配前端资源优点配置简单前端请求资源时可以不加任何前缀缺点不能配置多个代理2、在setupProxy.js文件中配置代理1具体实现在 src 目录下创建并配置 setupProxy.js 文件const{createProxyMiddleware}require(http-proxy-middleware);module.exportsfunction(app){app.use(createProxyMiddleware(/api1,{target:http://localhost:5000,changeOrigin:true,pathRewrite:{^/api1:},}),createProxyMiddleware(/api2,{target:http://localhost:5001,changeOrigin:true,pathRewrite:{^/api2:},}),);};App.jsximportReact,{Component}fromreact;importaxiosfromaxios;exportdefaultclassAppextendsComponent{getStudentData(){axios.get(http://localhost:3000/api1/students).then((response){console.log(成功了,response.data);},(error){console.log(失败了,error);},);};getCarData(){axios.get(http://localhost:3000/api2/cars).then((response){console.log(成功了,response.data);},(error){console.log(失败了,error);},);};render(){return(divbutton onClick{this.getStudentData}点我获取学生数据/buttonbutton onClick{this.getCarData}点我获取汽车数据/button/div);}}2解读/api1是需要转发的请求target 是转发目标地址所有带有/api1前缀的请求都会转发给 targetcreateProxyMiddleware(/api1,{target:http://localhost:5000,...})控制服务器接收到的请求头中 Host 字段的值changeOrigin 默认值为 false但我们一般设置为 true1. changeOrigin 设置为 true 时服务器收到的请求头中的 Host 字段为localhost:5000 2. changeOrigin 设置为 false 时服务器收到的请求头中的 Host 字段为localhost:3000changeOrigin:true,去除请求前缀保证交给后台服务器的是正常请求地址必须配置pathRewrite:{^/api2:},3小结优点可以配置多个代理可以灵活的控制请求是否走代理缺点配置繁琐前端请求资源时必须加前缀二、搜索案例Fetch PubSubList 组件importReact,{Component}fromreact;importPubSubfrompubsub-js;import./index.css;exportdefaultclassListextendsComponent{state{users:[],isFirst:true,isLoading:false,err:,};componentDidMount(){this.tokenPubSub.subscribe(test,(msgName,stateObj){this.setState(stateObj);});}componentWillUnmount(){PubSub.unsubscribe(this.token);}render(){const{users,isFirst,isLoading,err}this.state;return(div classNamerow{isFirst?(h3欢迎使用输入关键字随后点击搜索/h3):isLoading?(h3Loading.../h3):err?(h3 style{{color:red}}{err}/h3):(users.map((userObj){return(div key{userObj.id}classNamecarda relnoreferrerhref{userObj.html_url}target_blankimg althead_portraitsrc{userObj.avatar_url}style{{width:100px}}//ap classNamecard-text{userObj.login}/p/div);}))}/div);}}.album{min-height:50rem;padding-top:3rem;padding-bottom:3rem;background-color:#f7f7f7;}.card{float:left;width:33.333%;padding:0.75rem;margin-bottom:2rem;border:1px solid #efefef;text-align:center;}.card img{margin-bottom:0.75rem;border-radius:100px;}.card-text{font-size:85%;}Search 组件importReact,{Component}fromreact;importPubSubfrompubsub-js;exportdefaultclassSearchextendsComponent{searchasync(){// 获取用户的输入连续解构赋值 重命名const{keyWordElement:{value:keyWord},}this;// 发送请求前通知更新状态PubSub.publish(test,{isFirst:false,isLoading:true});try{constresponseawaitfetch(/api1/search/users?q${keyWord});constdataawaitresponse.json();// 请求成功后通知更新状态PubSub.publish(test,{isLoading:false,users:data.items});}catch(error){// 请求失败后通知更新状态PubSub.publish(test,{isLoading:false,err:error.message});}};render(){return(section classNamejumbotronh3 classNamejumbotron-heading搜索 GitHub 用户/h3divinput ref{(c)(this.keyWordElementc)}typetextplaceholder输入关键词点击搜索/nbsp;button onClick{this.search}搜索/button/div/section);}}App 组件importReact,{Component}fromreact;importSearchfrom./components/Search;importListfrom./components/List;exportdefaultclassAppextendsComponent{render(){return(div classNamecontainerSearch/List//div);}}index.jsimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件// 渲染 App 组件到页面ReactDOM.render(App/,document.getElementById(root));setupProxy.jsconst{createProxyMiddleware}require(http-proxy-middleware);module.exportsfunction(app){app.use(createProxyMiddleware(/api1,{target:http://localhost:5000,changeOrigin:true,pathRewrite:{^/api1:},}),);};三、React 路由基本使用About 组件importReact,{Component}fromreact;exportdefaultclassAboutextendsComponent{render(){returnh3About Content/h3;}}Home 组件importReact,{Component}fromreact;exportdefaultclassHomeextendsComponent{render(){returnh3Home Content/h3;}}App 组件importReact,{Component}fromreact;import{Link,Route}fromreact-router-dom;importHomefrom./components/Home;importAboutfrom./components/About;exportdefaultclassAppextendsComponent{render(){return(divh2React Router Demo/h2divLink to/aboutAbout/LinkLink to/homeHome/Link/divdivRoute path/aboutcomponent{About}/Route path/homecomponent{Home}//div/div);}}index.jsimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件import{BrowserRouter}fromreact-router-dom;// 渲染 App 组件到页面ReactDOM.render(BrowserRouterApp//BrowserRouter,document.getElementById(root),);四、NavLink1、基本介绍Link单纯的页面跳转组件提供导航功能NavLink是 Link 的特殊版本除了导航功能它会自动给当前激活的链接添加样式或类名NavLink 的 activeClassName 用于自定义激活类名默认是 active2、基本使用About 组件importReact,{Component}fromreact;exportdefaultclassAboutextendsComponent{render(){returnh3About Content/h3;}}Home 组件importReact,{Component}fromreact;exportdefaultclassHomeextendsComponent{render(){returnh3Home Content/h3;}}App 组件importReact,{Component}fromreact;import{NavLink,Route}fromreact-router-dom;importHomefrom./components/Home;importAboutfrom./components/About;import./App.css;exportdefaultclassAppextendsComponent{render(){return(divh2React Router Demo/h2divNavLink activeClassNameselectedclassNamelist-group-itemto/aboutAbout/NavLinkNavLink activeClassNameselectedclassNamelist-group-itemto/homeHome/NavLink/divdivRoute path/aboutcomponent{About}/Route path/homecomponent{Home}//div/div);}}.active{color:red;font-weight:bold;background-color:#f0f0f0;}.selected{color:blue;font-weight:bold;background-color:#f0f0f0;}index.jsimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件import{BrowserRouter}fromreact-router-dom;// 渲染 App 组件到页面ReactDOM.render(BrowserRouterApp//BrowserRouter,document.getElementById(root),);3、NavLink 封装1pagesAbout 组件importReact,{Component}fromreact;exportdefaultclassAboutextendsComponent{render(){returnh3About Content/h3;}}Home 组件importReact,{Component}fromreact;exportdefaultclassHomeextendsComponent{render(){returnh3Home Content/h3;}}2componentsMyNavLink 组件importReact,{Component}fromreact;import{NavLink}fromreact-router-dom;import./index.css;exportdefaultclassMyNavLinkextendsComponent{render(){returnNavLink activeClassNameselectedclassNamelist-group-item{...this.props}/;}}.active{color:red;font-weight:bold;background-color:#f0f0f0;}.selected{color:blue;font-weight:bold;background-color:#f0f0f0;}3mainApp 组件importReact,{Component}fromreact;import{Route}fromreact-router-dom;importHomefrom./pages/Home;importAboutfrom./pages/About;importMyNavLinkfrom./components/MyNavLink/index;exportdefaultclassAppextendsComponent{render(){return(divh2React Router Demo/h2divMyNavLink to/aboutAbout/MyNavLinkMyNavLink to/homeHome/MyNavLink/divdivRoute path/aboutcomponent{About}/Route path/homecomponent{Home}//div/div);}}index.jsimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件import{BrowserRouter}fromreact-router-dom;// 渲染 App 组件到页面ReactDOM.render(BrowserRouterApp//BrowserRouter,document.getElementById(root),);