React - 路由样式丢失问题、路由观察记录、路由传递参数

一、路由样式丢失问题1、问题复现1htmlpublic/index.html...linkrelstylesheethref./css/myStyle.css...public/css/myStyle.css.my-box{border:1px solid red;background-color:skyblue;}2componentMyNavLink 组件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;}3pageAbout 页面importReact,{Component}fromreact;exportdefaultclassAboutextendsComponent{render(){returnh3 classNamemy-boxAbout Content/h3;}}Home 页面importReact,{Component}fromreact;exportdefaultclassHomeextendsComponent{render(){returnh3 classNamemy-boxHome Content/h3;}}4mainApp 组件importReact,{Component}fromreact;import{Route,Switch}fromreact-router-dom;importHomefrom./pages/Home;importAboutfrom./pages/About;importMyNavLinkfrom./components/MyNavLink/index;exportdefaultclassAppextendsComponent{render(){return(divh2React Router Demo/h2divMyNavLink to/test/aboutAbout/MyNavLinkMyNavLink to/test/homeHome/MyNavLink/divdivSwitchRoute path/test/aboutcomponent{About}/Route path/test/homecomponent{Home}//Switch/div/div);}}index.jsimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件import{BrowserRouter}fromreact-router-dom;// 渲染 App 组件到页面ReactDOM.render(BrowserRouterApp//BrowserRouter,document.getElementById(root),);5test访问http://localhost:3000样式生效# 此时请求样式的路径为 http://localhost:3000/css/myStyle.css访问http://localhost:3000/test/about样式丢失# 此时请求样式的路径为 http://localhost:3000/test/css/myStyle.css2、处理策略使用%PUBLIC_URL%环境变量linkrelstylesheethref%PUBLIC_URL%/css/myStyle.css3、访问路径小结http://localhost:3000相当于 public 目录可以指定路径以访问 public 目录下的文件例如http://localhost:3000/favicon.ico会返回 public 目录下的 favicon.ico 文件如果没有指定路径或者指定一个不存在的路径默认会返回 public 目录下的 index.html 文件二、路由观察记录1、基础路由1演示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);}}访问http://localhost:3000访问正常访问http://localhost:3000/about访问正常访问http://localhost:3000/home访问正常2小结多个 Route 可以同时匹配2、错误的 Redirect1演示importReact,{Component}fromreact;import{Route,Redirect}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}/Redirect path/about//div/div);}}访问http://localhost:3000访问正常访问http://localhost:3000/about跳转到http://localhost:3000访问http://localhost:3000/home跳转到http://localhost:30002小结多个 Route 可以同时匹配访问/about时先匹配到Route path/about继续匹配到错误的Redirect path/aboutReact Router 可能将其解析为某种重定向逻辑访问/home时先匹配到Route path/home继续匹配到错误的Redirect path/aboutReact Router 可能将其解析为某种重定向逻辑3、Switch 错误的 Redirect1演示importReact,{Component}fromreact;import{Route,Switch,Redirect}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/divdivSwitchRoute path/aboutcomponent{About}/Route path/homecomponent{Home}/Redirect path/about//Switch/div/div);}}访问http://localhost:3000访问正常访问http://localhost:3000/about访问正常访问http://localhost:3000/home访问正常2小结Switch 只渲染第一个匹配到的组件访问/about时第一个匹配的是Route path/about渲染 About 后就停止了错误的 Redirect 没有被处理访问/home时第一个匹配的是Route path/home渲染 Home 后就停止了错误的 Redirect 没有被处理4、正确的 Redirect1演示importReact,{Component}fromreact;import{Route,Redirect}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}/Redirect to/about//div/div);}}访问http://localhost:3000跳转到http://localhost:3000/about访问http://localhost:3000/about访问正常访问http://localhost:3000/home跳转到http://localhost:3000/about2小结多个 Route 可以同时匹配访问/about时先匹配到Route path/about继续匹配Redirect to/about /访问/home时先匹配到Route path/home继续匹配Redirect to/about /5、Switch 正确的 Redirect1演示importReact,{Component}fromreact;import{Route,Switch,Redirect}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/divdivSwitchRoute path/aboutcomponent{About}/Route path/homecomponent{Home}/Redirect to/about//Switch/div/div);}}访问http://localhost:3000跳转到http://localhost:3000/about访问http://localhost:3000/about访问正常访问http://localhost:3000/home访问正常2小结Switch 只渲染第一个匹配到的组件访问/about时第一个匹配的是Route path/about渲染 About 后就停止了访问/home时第一个匹配的是Route path/home渲染 Home 后就停止了三、路由传递参数1、基本介绍params 参数适合传递必须参数例如ID、用户名等search 参数适合可选参数、过滤条件等state 参数适合传递复杂数据、敏感信息不会显示在 URL 中2、演示1pageMessage 页面importReact,{Component}fromreact;import{Link,Route}fromreact-router-dom;importDetailfrom./Detail;importNewsfrom./News;importTipfrom./Tip;exportdefaultclassMessageextendsComponent{state{messageArr:[{id:01,title:消息 1},{id:02,title:消息 2},{id:03,title:消息 3},],};render(){const{messageArr}this.state;return(divh3传递 params 参数/h3ul{messageArr.map((msgObj){return(li key{msgObj.id}Link to{/message/detail/${msgObj.id}/${msgObj.title}}{msgObj.title}/Link/li);})}/ulRoute path/message/detail/:id/:titlecomponent{Detail}/h3传递 search 参数/h3ul{messageArr.map((msgObj){return(li key{msgObj.id}Link to{/message/news/?id${msgObj.id}title${msgObj.title}}{msgObj.title}/Link/li);})}/ulRoute path/message/newscomponent{News}/h3传递 state 参数/h3ul{messageArr.map((msgObj){return(li key{msgObj.id}Link to{{pathname:/message/tip,state:{id:msgObj.id,title:msgObj.title}}}{msgObj.title}/Link/li);})}/ulRoute path/message/tipcomponent{Tip}//div);}}Detail 页面importReact,{Component}fromreact;exportdefaultclassDetailextendsComponent{render(){const{id,title}this.props.match.params;return(ulliid:{id}/lilititle:{title}/li/ul);}}News 页面importReact,{Component}fromreact;importqsfromqs;exportdefaultclassNewsextendsComponent{render(){const{search}this.props.location;const{id,title}qs.parse(search.slice(1));return(ulliid:{id}/lilititle:{title}/li/ul);}}Tip 页面importReact,{Component}fromreact;exportdefaultclassTipextendsComponent{render(){const{id,title}this.props.location.state||{};return(ulliid:{id}/lilititle:{title}/li/ul);}}2mainApp 组件importReact,{Component}fromreact;import{Route}fromreact-router-dom;importMessagefrom./pages/Message;exportdefaultclassAppextendsComponent{render(){return(divRoute path/messagecomponent{Message}//div);}}index.jsimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件import{BrowserRouter}fromreact-router-dom;// 渲染 App 组件到页面ReactDOM.render(BrowserRouterApp//BrowserRouter,document.getElementById(root),);