React - BrowserRouter 与 HashRouter、push 模式与 replace 模式、编程式导航、withRouter

一、BrowserRouter 与 HashRouter1、基本介绍1BrowserRouterURL 形式example.com/path使用 HTML5 的 History APIpushState、replaceState需要服务器配置所有路径都返回index.html否则刷新会 4042HashRouterURL 形式example.com/#/path使用 URL 的 hash#部分无需服务器配置hash 变化不会向服务器发请求2、基本使用使用 BrowserRouterimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件import{BrowserRouter}fromreact-router-dom;// 渲染 App 组件到页面ReactDOM.render(BrowserRouterApp//BrowserRouter,document.getElementById(root),);使用 HashRouterimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件import{HashRouter}fromreact-router-dom;// 渲染 App 组件到页面ReactDOM.render(HashRouterApp//HashRouter,document.getElementById(root),);二、push 模式与 replace 模式1、基本介绍push 模式默认在历史栈中添加新记录可以点击浏览器后退按钮返回上一页replace 模式替换当前历史记录不添加新记录点击后退不会回到当前页直接跳到更早的页面2、replace 模式演示1pageAbout 组件importReact,{Component}fromreact;exportdefaultclassAboutextendsComponent{render(){returnh3About Content/h3;}}Home 组件importReact,{Component}fromreact;exportdefaultclassHomeextendsComponent{render(){returnh3Home Content/h3;}}2mainApp 组件importReact,{Component}fromreact;import{Link,Route}fromreact-router-dom;importHomefrom./pages/Home;importAboutfrom./pages/About;exportdefaultclassAppextendsComponent{render(){return(divh2React Router Demo/h2divLink replace to/aboutAbout/LinkLink replace 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),);三、编程式导航1、pageMessage 组件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},],};pushParamsShow(id,title){this.props.history.push(/message/detail/${id}/${title});};replaceParamsShow(id,title){this.props.history.replace(/message/detail/${id}/${title});};pushSearchShow(id,title){this.props.history.push(/message/news/?id${id}title${title});};replaceSearchShow(id,title){this.props.history.replace(/message/news/?id${id}title${title});};pushStateShow(id,title){this.props.history.push({pathname:/message/tip,state:{id,title}});};replaceStateShow(id,title){this.props.history.replace({pathname:/message/tip,state:{id,title}});};back(){this.props.history.goBack();};forward(){this.props.history.goForward();};go(){this.props.history.go(2);};render(){const{messageArr}this.state;return(divh3传递 params 参数/h3ul{messageArr.map((msgObj){return(li key{msgObj.id}button onClick{()this.pushParamsShow(msgObj.id,msgObj.title)}{msgObj.title}push/buttonbutton onClick{()this.replaceParamsShow(msgObj.id,msgObj.title)}{msgObj.title}replace/button/li);})}/ulRoute path/message/detail/:id/:titlecomponent{Detail}/h3传递 search 参数/h3ul{messageArr.map((msgObj){return(li key{msgObj.id}button onClick{()this.pushSearchShow(msgObj.id,msgObj.title)}{msgObj.title}push/buttonbutton onClick{()this.replaceSearchShow(msgObj.id,msgObj.title)}{msgObj.title}replace/button/li);})}/ulRoute path/message/newscomponent{News}/h3传递 state 参数/h3ul{messageArr.map((msgObj){return(li key{msgObj.id}button onClick{()this.pushStateShow(msgObj.id,msgObj.title)}{msgObj.title}push/buttonbutton onClick{()this.replaceStateShow(msgObj.id,msgObj.title)}{msgObj.title}replace/button/li);})}/ulRoute path/message/tipcomponent{Tip}/button onClick{this.back}回退/buttonnbsp;button onClick{this.forward}前进/buttonnbsp;button onClick{this.go}go/button/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);}}2、mainApp 组件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),);四、withRouter1、基本介绍withRouter 的主要作用是让那些不是通过路由直接渲染的组件也能访问到路由相关的属性如 history、location 和 match在 React Router 中只有直接被 Route 渲染的组件其 props 里会自动获得路由信息2、演示Header 组件importReact,{Component}fromreact;import{withRouter}fromreact-router-dom;classHeaderextendsComponent{back(){this.props.history.goBack();};forward(){this.props.history.goForward();};go(){this.props.history.go(-2);};render(){console.log(Header 组件收到的 props 是,this.props);return(div classNamepage-headerh2React Router Demo/h2button onClick{this.back}回退/buttonnbsp;button onClick{this.forward}前进/buttonnbsp;button onClick{this.go}go/button/div);}}exportdefaultwithRouter(Header);