蜜芽免费网站域名,做餐饮网站建设,河南旅游网页设计,网站引导页html模板目录#xff1a;
对SPA应用的理解对路由的理解前端路由原理路由的基本使用路由组件与一般组件NavLink的使用封装NavLink组件Switch的使用解决样式丢失问题路由的模糊匹配与严格匹配Redirect的使用嵌套路由向路由组件传递params参数向路由组件传递search参数.向路由组件传递st…目录
对SPA应用的理解对路由的理解前端路由原理路由的基本使用路由组件与一般组件NavLink的使用封装NavLink组件Switch的使用解决样式丢失问题路由的模糊匹配与严格匹配Redirect的使用嵌套路由向路由组件传递params参数向路由组件传递search参数.向路由组件传递state参数总结路由参数push与repalce编程式路由导航withRouter的作用BrowserRouter与HashRouter
1.对SPA应用的理解
单页Web应用single page web applicationSPA。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。
2.对路由的理解
什么是路由?
一个路由就是一个映射关系(key:value)key为路径, value可能是function或component
路由分类
后端路由 理解 value是function, 用来处理客户端提交的请求。注册路由 router.get(path, function(req, res))工作过程当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据前端路由 浏览器端路由value是component用于展示页面内容。注册路由: Route path/test component{Test}工作过程当浏览器的path变为/test时, 当前路由组件就会变为Test组件
3.前端路由原理
前端路由的基石.html
!DOCTYPE html
html langen
headmeta charsetUTF-8title前端路由的基石_history/title
/head
bodya hrefhttp://www.atguigu.com onclickreturn push(/test1) push test1/abrbrbutton onClickpush(/test2)push test2/buttonbrbrbutton onClickreplace(/test3)replace test3/buttonbrbrbutton onClickback()lt; 回退/buttonbutton onClickforword()前进 gt;/buttonscript typetext/javascript srchttps://cdn.bootcss.com/history/4.7.2/history.js/scriptscript typetext/javascript// let history History.createBrowserHistory() //方法一直接使用H5推出的history身上的APIlet history History.createHashHistory() //方法二hash值锚点function push (path) {history.push(path)return false}function replace (path) {history.replace(path)}function back() {history.goBack()}function forword() {history.goForward()}history.listen((location) {console.log(请求路由路径变化了, location)})/script
/body
/html 4.路由的基本使用
明确好界面中的导航区、展示区导航区的a标签改为Link标签 Link to/xxxxx Demo/Link展示区写Route标签进行路径的匹配Route path/xxxx component{Demo}/App的最外侧包裹了一个BrowserRouter或HashRouter
App.js
import React, {Component} from react;
import {Link, Route} from react-router-dom;
import About from ./components/About/About;
import Home from ./components/Home/Home;class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8div classNamepage-headerh2React Router Demo/h2/div/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-groupLink classNamelist-group-item to/aboutAbout/LinkLink classNamelist-group-item to/homeHome/Link/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-bodyRoute path/about component{About}/RouteRoute path/home component{Home}/Route/div/div/div/div/div);}
}export default App;
index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import {BrowserRouter} from react-router-dom;const root ReactDOM.createRoot(document.getElementById(root));
root.render(BrowserRouterApp//BrowserRouter
);
About.jsx
import React, {Component} from react;class About extends Component {render() {return (divh3我是About的内容/h3/div);}
}export default About;
Home.jsx
import React, {Component} from react;class Home extends Component {render() {return (divh3我是Home的内容/h3/div);}
}export default Home;
运行结果 5.路由组件与一般组件
写法不同: 一般组件: Demo/ 路由组件: Route path/demo component{Demo}/存放位置不同: 一般组件:components路由组件: pages接收到的props不同: 一般组件:,写组件标签时传递了什么就能收到什么路由组件:接收到三个固定的属性 history: go: f go(n)goBack: f goBack()goForward: f goForward()push: f push(path,state)replace: f replace(path, state) location: pathname: /aboutsearch: state: undefined match:| params: {}path: /abouturl: /about 6.NavLink的使用 Header.jsx
import React, {Component} from react;class Header extends Component {render() {// console.log(Header组件收到的props是, this.props)return (divdiv classNamepage-headerh2React Router Demo/h2/div/div);}
}export default Header;
About.jsx
import React, {Component} from react;class About extends Component {render() {// console.log(About组件收到的props是, this.props)return (divh3我是About的内容/h3/div);}
}export default About;
Home.jsx
import React, {Component} from react;class Home extends Component {render() {return (divh3我是Home的内容/h3/div);}
}export default Home;
App.js
import React, {Component} from react;
import {NavLink, Route} from react-router-dom;
import About from ./pages/About/About;
import Home from ./pages/Home/Home;
import Header from ./components/Header/Header;class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8Header a{1}/Header/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-groupNavLink activeClassNameatguigu classNamelist-group-item to/aboutAbout/NavLinkNavLink activeClassNameatguigu classNamelist-group-item to/homeHome/NavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-bodyRoute path/about component{About}/RouteRoute path/home component{Home}/Route/div/div/div/div/div);}
}export default App;
index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import {BrowserRouter} from react-router-dom;const root ReactDOM.createRoot(document.getElementById(root));
root.render(BrowserRouterApp//BrowserRouter
);
index.html
!DOCTYPE html
html langen
headmeta charsetutf-8/link relicon href%PUBLIC_URL%/favicon.ico/meta nameviewport contentwidthdevice-width, initial-scale1/meta nametheme-color content#000000/metanamedescriptioncontentWeb site created using create-react-app/link relapple-touch-icon href%PUBLIC_URL%/logo192.png/link relmanifest href%PUBLIC_URL%/manifest.json/link relstylesheet hrefcss/bootstrap.cssstyle.atguigu {background-color: orange !important;color: white !important;}/styletitleReact App/title
/head
body
noscriptYou need to enable JavaScript to run this app./noscript
div idroot/div
/body
/html项目结构 运行结果 7.封装NavLink组件
NavLink与封装NavLink
NavLink可以实现路由链接的高亮通过activeclassName指定样式名标签体内容是一个特殊的标签属性通过this.props.children可以获取标签体内容 App.js
import React, {Component} from react;
import {NavLink, Route} from react-router-dom;
import About from ./pages/About/About;
import Home from ./pages/Home/Home;
import Header from ./components/Header/Header;
import MyNavLink from ./components/MyNavLink/MyNavLink;class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8Header a{1}/Header/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-groupMyNavLink to/about a{1} b{2} c{3}About/MyNavLinkMyNavLink to/homeHome/MyNavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-bodyRoute path/about component{About}/RouteRoute path/home component{Home}/Route/div/div/div/div/div);}
}export default App;
index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import {BrowserRouter} from react-router-dom;const root ReactDOM.createRoot(document.getElementById(root));
root.render(BrowserRouterApp//BrowserRouter
);
Header.jsx
import React, {Component} from react;class Header extends Component {render() {// console.log(Header组件收到的props是, this.props)return (divdiv classNamepage-headerh2React Router Demo/h2/div/div);}
}export default Header;
MyNavLink.jsx
import React, {Component} from react;
import {NavLink} from react-router-dom;class MyNavLink extends Component {render() {console.log(this.props)return (divNavLink activeClassNameatguigu classNamelist-group-item {...this.props}//div);}
}export default MyNavLink;
About.jsx
import React, {Component} from react;class About extends Component {render() {// console.log(About组件收到的props是, this.props)return (divh3我是About的内容/h3/div);}
}export default About;
Home.jsx
import React, {Component} from react;class Home extends Component {render() {return (divh3我是Home的内容/h3/div);}
}export default Home;
项目结构 运行结果 8.Switch的使用
通常情况下path和component是一一对应的关系。Switch可以提高路由匹配效率(单一匹配)。
Test.jsx
import React, {Component} from react;class Test extends Component {render() {return (divh2Test.../h2/div);}
}export default Test;
App.js
import React, {Component} from react;
import {NavLink, Route, Switch} from react-router-dom;
import About from ./pages/About/About;
import Home from ./pages/Home/Home;
import Header from ./components/Header/Header;
import MyNavLink from ./components/MyNavLink/MyNavLink;
import Test from ./pages/Test/Test;class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8Header a{1}/Header/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-groupMyNavLink to/about a{1} b{2} c{3}About/MyNavLinkMyNavLink to/homeHome/MyNavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-bodySwitchRoute path/about component{About}/RouteRoute path/home component{Home}/RouteRoute path/home component{Test}/Route/Switch/div/div/div/div/div);}
}export default App;
运行结果 项目结构 9.解决样式丢失问题 public/index.html 中引入样式时不写./写/常用) public/index.html 中引入样式时不写﹒/写%PUBLIC_URL%常用) 使用HashRouter
1../css/bootstrap.css改为
link relstylesheet hrefcss/bootstrap.css
2../css/bootstrap.css改为
link relstylesheet href%PUBLIC_URL%/css/bootstrap.css
3.BroserRouter改成HashRouter
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import {BrowserRouter, HashRouter} from react-router-dom;const root ReactDOM.createRoot(document.getElementById(root));
root.render(HashRouterApp//HashRouter
); 10.路由的模糊匹配与严格匹配
默认使用的是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】且顺序要一致)开启严格匹配Route exact{true} path/about component{About}/严格匹配不要随便开启需要再开有些时候开启会导致无法继续匹配二级路由 App.js
import React, {Component} from react;
import {Route, Switch} from react-router-dom;
import About from ./pages/About/About;
import Home from ./pages/Home/Home;
import Header from ./components/Header/Header;
import MyNavLink from ./components/MyNavLink/MyNavLink;class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8Header a{1}/Header/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-groupMyNavLink to/aboutAbout/MyNavLinkMyNavLink to/home/a/bHome/MyNavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-bodySwitchRoute exact path/about component{About}/RouteRoute exact path/home component{Home}/Route/Switch/div/div/div/div/div);}
}export default App;
运行结果 11.Redirect的使用
一般写在所有路由注册的最下方当所有路由都无法匹配时跳转到Redirect指定的路由具体编码: Switch
Route path/about component{About}/
Route path/home component{Home}/
Redirect to/about/
/Switch
App.js
import React, {Component} from react;
import {Redirect, Route, Switch} from react-router-dom;
import About from ./pages/About/About;
import Home from ./pages/Home/Home;
import Header from ./components/Header/Header;
import MyNavLink from ./components/MyNavLink/MyNavLink;class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8Header a{1}/Header/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-groupMyNavLink to/aboutAbout/MyNavLinkMyNavLink to/homeHome/MyNavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-bodySwitchRoute path/about component{About}/RouteRoute path/home component{Home}/RouteRedirect to/about/Redirect/Switch/div/div/div/div/div);}
}export default App;
12.嵌套路由
注册子路由时要写上父路由的path值路由的匹配是按照注册路由的顺序进行的
App.js
import React, {Component} from react;
import {Redirect, Route, Switch} from react-router-dom;
import About from ./pages/About/About;
import Home from ./pages/Home/Home;
import Header from ./components/Header/Header;
import MyNavLink from ./components/MyNavLink/MyNavLink;class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8Header a{1}/Header/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-groupMyNavLink to/aboutAbout/MyNavLinkMyNavLink to/homeHome/MyNavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-bodySwitchRoute path/about component{About}/RouteRoute path/home component{Home}/RouteRedirect to/about/Redirect/Switch/div/div/div/div/div);}
}export default App;
Message.jsx
import React, {Component} from react;class Message extends Component {render() {return (divullia href/message1message001/anbsp;nbsp;/lilia href/message2message002/anbsp;nbsp;/lilia href/message/3message003/anbsp;nbsp;/li/ul/div);}
}export default Message; News.jsx
import React, {Component} from react;class News extends Component {render() {return (divullinews001/lilinews002/lilinews003/li/ul/div);}
}export default News;
Home.jsx
import React, {Component} from react;
import MyNavLink from ../../components/MyNavLink/MyNavLink;
import {Redirect, Route, Switch} from react-router-dom;
import News from ./News/News;
import Message from ./Message/Message;class Home extends Component {render() {return (divh2Home组件内容/h2divul classNamenav nav-tabsliMyNavLink to/home/newsNews/MyNavLink/liliMyNavLink to/home/messageMessage/MyNavLink/li/ulSwitchRoute path/home/news component{News}/RouteRoute path/home/message component{Message}/RouteRedirect to/home/news/Redirect/Switch/div/div);}
}export default Home;
MyNavLink.jsx
import React, {Component} from react;
import {NavLink} from react-router-dom;class MyNavLink extends Component {render() {console.log(this.props)return (divNavLink activeClassNameatguigu classNamelist-group-item {...this.props}//div);}
}export default MyNavLink;
Header.jsx
import React, {Component} from react;class Header extends Component {render() {// console.log(Header组件收到的props是, this.props)return (divdiv classNamepage-headerh2React Router Demo/h2/div/div);}
}export default Header;
About.jsx
import React, {Component} from react;class About extends Component {render() {// console.log(About组件收到的props是, this.props)return (divh3我是About的内容/h3/div);}
}export default About;
index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import {BrowserRouter, HashRouter} from react-router-dom;const root ReactDOM.createRoot(document.getElementById(root));
root.render(HashRouterApp//HashRouter
);
项目结构 运行结果 13. 向路由组件传递params参数 1.params参数 路由链接(携带参数):Link to/demo/test/tom/18}详情/Link注册路由(声明接收):Route path/demo/test/:name/:age component{Test}/接收参数: const {id,title} this.props.match.params Header.jsx
import React, {Component} from react;class Header extends Component {render() {// console.log(Header组件收到的props是, this.props)return (divdiv classNamepage-headerh2React Router Demo/h2/div/div);}
}export default Header;
MyNavLink.jsx
import React, {Component} from react;
import {NavLink} from react-router-dom;class MyNavLink extends Component {render() {console.log(this.props)return (divNavLink activeClassNameatguigu classNamelist-group-item {...this.props}//div);}
}export default MyNavLink;
About.jsx
import React, {Component} from react;class About extends Component {render() {// console.log(About组件收到的props是, this.props)return (divh3我是About的内容/h3/div);}
}export default About;
Detail.jsx
import React, {Component} from react;const DetailData [{id: 01, content: 你好,中国},{id: 02, content: 你好,尚硅谷},{id: 03, content: 你好,未来的自己},
]class Detail extends Component {render() {// console.log(this.props)const {id, title} this.props.match.paramsconst findResult DetailData.find((detailObj) {return detailObj.id id})return (ulliID:{id}/liliTITLE:{title}/liliCONTENT:{findResult.content}/li/ul);}
}export default Detail;
Message.jsx
import React, {Component} from react;
import Detail from ./Detail/Detail;
import {Link, Route} from react-router-dom;class Message extends Component {state {messageArr: [{id: 01, title: 消息1},{id: 02, title: 消息2},{id: 03, title: 消息3},]}render() {const {messageArr} this.statereturn (divul{messageArr.map((msgObj) {return (li key{msgObj.id}Link to{/home/message/detail/${msgObj.id}/${msgObj.title}}{msgObj.title}/Link/li)})}/ulhr/hrRoute path/home/message/detail/:id/:title component{Detail}/Route/div);}
}export default Message;
News.jsx
import React, {Component} from react;class News extends Component {render() {return (divullinews001/lilinews002/lilinews003/li/ul/div);}
}export default News;
Home.jsx
import React, {Component} from react;
import MyNavLink from ../../components/MyNavLink/MyNavLink;
import {Redirect, Route, Switch} from react-router-dom;
import News from ./News/News;
import Message from ./Message/Message;class Home extends Component {render() {return (divh2Home组件内容/h2divul classNamenav nav-tabsliMyNavLink to/home/newsNews/MyNavLink/liliMyNavLink to/home/messageMessage/MyNavLink/li/ulSwitchRoute path/home/news component{News}/RouteRoute path/home/message component{Message}/RouteRedirect to/home/news/Redirect/Switch/div/div);}
}export default Home;
App.js
import React, {Component} from react;
import {Redirect, Route, Switch} from react-router-dom;
import About from ./pages/About/About;
import Home from ./pages/Home/Home;
import Header from ./components/Header/Header;
import MyNavLink from ./components/MyNavLink/MyNavLink;class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8Header a{1}/Header/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-groupMyNavLink to/aboutAbout/MyNavLinkMyNavLink to/homeHome/MyNavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-bodySwitchRoute path/about component{About}/RouteRoute path/home component{Home}/RouteRedirect to/about/Redirect/Switch/div/div/div/div/div);}
}export default App;
index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import {BrowserRouter, HashRouter} from react-router-dom;const root ReactDOM.createRoot(document.getElementById(root));
root.render(HashRouterApp//HashRouter
);
运行结果 项目结构 14.向路由组件传递search参数
2.search参数
路由链接(携带参数): Link to /demo/test?nametomage18}详情/Link注册路由(无需声明正常注册即可): Route path/demo/test component{Test}/接收参数: const isearch} this.props.location备注:获取到的search是urlencoded编码字符串需要借助querystring解析
Message.jsx
import React, {Component} from react;
import Detail from ./Detail/Detail;
import {Link, Route} from react-router-dom;class Message extends Component {state {messageArr: [{id: 01, title: 消息1},{id: 02, title: 消息2},{id: 03, title: 消息3},]}render() {const {messageArr} this.statereturn (divul{messageArr.map((msgObj) {return (li key{msgObj.id}{/*Link to{/home/message/detail/${msgObj.id}/${msgObj.title}}{msgObj.title}/Link*/}Link to{/home/message/detail/?id${msgObj.id}title${msgObj.title}}{msgObj.title}/Link/li)})}/ulhr/hr{/*Route path/home/message/detail/:id/:title component{Detail}/Route*/}Route path/home/message/detail component{Detail}/Route/div);}
}export default Message;
Detail.jsx
import React, {Component} from react;
import qs from qsconst DetailData [{id: 01, content: 你好,中国},{id: 02, content: 你好,尚硅谷},{id: 03, content: 你好,未来的自己},
]class Detail extends Component {render() {console.log(this.props)// const {id, title} this.props.match.paramsconst {search} this.props.locationconst {id, title} qs.parse(search.slice(1))const findResult DetailData.find((detailObj) {return detailObj.id id})return (ulliID:{id}/liliTITLE:{title}/liliCONTENT:{findResult.content}/li/ul);}
}export default Detail;
运行结果 项目结构 15.向路由组件传递state参数
state参数
路由链接(携带参数): Link to{{path: /demo/test,state:{name : tom ,age:18]}}详情/Link注册路由(无需声明正常注册即可):Route path/demo/test component{Test}/接收参数: this.props.location.state备注:刷新也可以保留住参数 Message.jsx
import React, {Component} from react;
import Detail from ./Detail/Detail;
import {Link, Route} from react-router-dom;class Message extends Component {state {messageArr: [{id: 01, title: 消息1},{id: 02, title: 消息2},{id: 03, title: 消息3},]}render() {const {messageArr} this.statereturn (divul{messageArr.map((msgObj) {return (li key{msgObj.id}{/*Link to{/home/message/detail/${msgObj.id}/${msgObj.title}}{msgObj.title}/Link*/}{/*Link to{/home/message/detail/?id${msgObj.id}title${msgObj.title}}{msgObj.title}/Link*/}Link to{{pathname: /home/message/detail,state: {id: msgObj.id, title: msgObj.title}}}{msgObj.title}/Link/li)})}/ulhr/hr{/*Route path/home/message/detail/:id/:title component{Detail}/Route*/}{/*Route path/home/message/detail component{Detail}/Route*/}Route path/home/message/detail component{Detail}/Route/div);}
}export default Message;
Detail.jsx
import React, {Component} from react;
import qs from qsconst DetailData [{id: 01, content: 你好,中国},{id: 02, content: 你好,尚硅谷},{id: 03, content: 你好,未来的自己},
]class Detail extends Component {render() {console.log(this.props)// const {id, title} this.props.match.params// const {search} this.props.location// const {id, title} qs.parse(search.slice(1))const {id, title} this.props.location.state || {}const findResult DetailData.find((detailObj) {return detailObj.id id}) || {}return (ulliID:{id}/liliTITLE:{title}/liliCONTENT:{findResult.content}/li/ul);}
}export default Detail;
运行结果 16.总结路由参数 17.push与repalce
Message.jsx
import React, {Component} from react;
import Detail from ./Detail/Detail;
import {Link, Route} from react-router-dom;class Message extends Component {state {messageArr: [{id: 01, title: 消息1},{id: 02, title: 消息2},{id: 03, title: 消息3},]}render() {const {messageArr} this.statereturn (divul{messageArr.map((msgObj) {return (li key{msgObj.id}{/*Link to{/home/message/detail/${msgObj.id}/${msgObj.title}}{msgObj.title}/Link*/}{/*Link to{/home/message/detail/?id${msgObj.id}title${msgObj.title}}{msgObj.title}/Link*/}Link replace{true} to{{pathname: /home/message/detail,state: {id: msgObj.id, title: msgObj.title}}}{msgObj.title}/Link/li)})}/ulhr/hr{/*Route path/home/message/detail/:id/:title component{Detail}/Route*/}{/*Route path/home/message/detail component{Detail}/Route*/}Route path/home/message/detail component{Detail}/Route/div);}
}export default Message;
push:留下记录repalce:不留记录
18.编程式路由导航
Message.jsx
import React, {Component} from react;
import Detail from ./Detail/Detail;
import {Link, Route} from react-router-dom;class Message extends Component {state {messageArr: [{id: 01, title: 消息1},{id: 02, title: 消息2},{id: 03, title: 消息3},]}render() {const {messageArr} this.statereturn (divul{messageArr.map((msgObj) {return (li key{msgObj.id}{/*Link to{/home/message/detail/${msgObj.id}/${msgObj.title}}{msgObj.title}/Link*/}{/*Link to{/home/message/detail/?id${msgObj.id}title${msgObj.title}}{msgObj.title}/Link*/}Link replace{true} to{{pathname: /home/message/detail,state: {id: msgObj.id, title: msgObj.title}}}{msgObj.title}/Link/li)})}/ulhr/hr{/*Route path/home/message/detail/:id/:title component{Detail}/Route*/}{/*Route path/home/message/detail component{Detail}/Route*/}Route path/home/message/detail component{Detail}/Route/div);}
}export default Message; Detail.jsx
import React, {Component} from react;
import qs from qsconst DetailData [{id: 01, content: 你好,中国},{id: 02, content: 你好,尚硅谷},{id: 03, content: 你好,未来的自己},
]class Detail extends Component {render() {console.log(this.props)// const {id, title} this.props.match.params// const {search} this.props.location// const {id, title} qs.parse(search.slice(1))const {id, title} this.props.location.state || {}const findResult DetailData.find((detailObj) {return detailObj.id id}) || {}return (ulliID:{id}/liliTITLE:{title}/liliCONTENT:{findResult.content}/li/ul);}
}export default Detail; 19.withRouter的作用
News.jsx
import React, {Component} from react;class News extends Component {componentDidMount() {setTimeout(() {this.props.history.push(/home/message)}, 2000)}render() {return (divullinews001/lilinews002/lilinews003/li/ul/div);}
}export default News;
借助this.prosp.history对象上的API对操作路由跳转、前进、后退this.prosp.history.push()this.prosp.history.replace()this.prosp.history.goBack()this.prosp.history.goForward()this.prosp.history.go() withRouter可以加工一般组件让一般组件具备路由组件所特有的APIwithRouter的返回值是一个新组件
Header.jsx
import React, {Component} from react;
import {withRouter} from react-router-dom;class Header extends Component {back () {this.props.history.goBack()}forward () {this.props.history.goForward()}go () {this.props.history.go(2)}render() {// console.log(Header组件收到的props是, this.props)return (divdiv classNamepage-headerh2React Router Demo/h2button onClick{this.back}回退/buttonbutton onClick{this.forward}前进/buttonbutton onClick{this.go}go/button/div/div);}
}export default withRouter(Header);
20.BrowserRouter与HashRouter
1.底层原理不一样: BrowserRouter使用的是H5的history API不兼容IE9及以下版本。HashRouter使用的是URL的哈希值2.path表现形式不一样 BrowserRouter的路径中没有#,例如: localhost:3000/demo/testHashRouter的路径包含#,例如: localhost:3000/#/demo/test3.刷新后对路由state参数的影响 (1).BrowserRouter没有任何影响因为state保存在history对象中。(2).HashRouter刷新后会导致路由state参数的丢失。4.备注: HashRouter可以用于解决一些路径错误相关的问题。
