React路由初始

一、SPA单页面1、单页Web应用单个html2、整个应用只有一个完整的页面3、点击页面中的链接不会刷新页面只会做页面的局部刷新4、数据都需要通过ajax请求获取并在前端异步展现二、路由的理解1、什么是路由一个路由就是一个映射关系keyvaluekey为路径value可能就是function或component2、路由的分类1后端路由value是fuction用来处理客户端提交的请求注册路由router.get(path,function(req,res));工作过程当node接收到一个请求时根据请求路径找到匹配的路由调用路由中的函数来处理请求返回响应数据2前端路由浏览器端路由value是component用于展示页面内容注册路由Route pathtest component{Test}工作过程当浏览器的path变为/test时当前的路由组件就会变成Test组件路由HISTORY有两种方式History.createBrowserHistory(),直接使用H5推出的history身上的APIHistory.createHashHistory(),hash值锚点有历史记录但是值的改变不会出发页面变化3、react-router-dom的理解react的一个插件库专门用来实现一个SPA应用基于react的下你项目基本都会用到此库。1) Link、Route与BrowserRouterimport { Link,BrowserRouter } from react-router-dom //在react中靠路由链接实现切换路由--编写路由链接 BrowserRouter Link to/about关于/Link /BrowserRouterimport { Route,BrowserRouter } import react-router-dom //注册路由 BrowserRouter Route path/about component{About}/ /BrowserRouter浏览器地址栏为 https://xxx.xxx.xxx:xxxx/about2)HashRouterimport { Link,HashRouter } from react-router-dom HashRouter Link to/about关于/Link /HashRouterimport { Route,HashRouter } import react-router-dom HashRouter Route path/about component{About}/ /HashRouter浏览器地址栏为 https://xxx.xxx.xxx:xxxx/#/about注由于Link与Route都需要BrowserRouter包裹且不能在项目中多次出现BrowserRouter或HashRouter,我们在项目中的index.js里对App进行包裹import React from react import ReactDOM from react-dom import { BrowserRouter } from react-router-dom import App from ./App ReactDOM.render( BrowserRouter App/ /BrowserRouter, document.getElementById(root) )3路由组件与一般组件1.写法不同一般组件Demo /路由组件Route path/about component{About}/2.存放的位置不同一般组件component路由组件pages3.接收到的props不同一般组件写组件标签时传递了什么就能接收到什么路由组件接收到3个固定的属性 history、location、match4NavLink如果实现如图所示的效果点击About或Home的话路由会高亮。按照bootstript的写法BrowserRouter Link to/about activeAbout/Link Link to/homeHome/Link /BrowserRouter需要在Link里添加activeimport { NavLink,BrowserRouter } from react-router-dom BrowserRouter NavLink to/aboutAbout/NavLink NavLink to/homeHome/NavLink /BrowserRouter使用NavLink的话react就会默认添加了active点击路由被激活的路由自然而然加了背景色此外如果觉得默认的样式不好看的话可以在NavLink加activeClassName给路由添加激活状态的样式这里的激活状态样式应该加高权重。5封装NavLinkimport { React,{Component}} from react import { NavLink,BrowserRouter } from react-router-dom export default MyNavLink extends Component { render(){ coonst { to,title } this.props return ( BrowserRouter NavLink to{to}{title}/NavLink /BrowserRouter ) } }MyNavLink to/ablut title关于/MyNavLink此外,如果给MyNavLink传递的过多可以直接用{...this.props}展开import { React,{Component}} from react import { NavLink,BrowserRouter } from react-router-dom export default MyNavLink extends Component { render(){ coonst { title } this.props return ( BrowserRouter NavLink {...this.props}{title}/NavLink /BrowserRouter ) } }另外如果我想以MyNavLink to/ablut关于/MyNavLink的形式呢这也是可以封装的上个代码示例中打印this.props的话会有个children属性import { React,{Component}} from react import { NavLink,BrowserRouter } from react-router-dom export default MyNavLink extends Component { render(){ console.log(this.props) return ( BrowserRouter NavLink {...this.props} / /BrowserRouter ) } }6) Switch的使用import { Route,BrowserRouter } import react-router-dom BrowserRouter Route path/about component{About}/ Route path/about component{Home}/ /BrowserRouter以上的情况如果路由是/about的话组件About和Home都会显示出来也就是说路由在匹配到路由时会继续往下进行匹配如果路由多的话不仅会耗性能还会出现意想不到的内容下是出来所以我们可以使用Switch进行包裹当匹配到适合的路由就停止往下继续匹配import { Route,BrowserRouter,Switch } import react-router-dom BrowserRouter Switch Route path/about component{About}/ Route path/about component{Home}/ /Switch /BrowserRouter通常情况下path与component是一一对应关系Switch可以提高路由的匹配效率(单一匹配)7样式丢失问题项目启动的本地路径http://XXX.XXX.XXX.XXX:XXXX,这是内置devServe服务器的请求地址当后面跟的路径是在路由中不存在时(多级路由)react会默认展示为public文件下的index.html页面。1、public/index.html中引入样式时不写 ./ 要写 /2、public/index.html中引入样式的改为%PUBLIC_URL%/css2、在根组件使用HashRouter包裹8)路由的模糊匹配import { Route,BrowserRouter,Switch } import react-router-dom BrowserRouter Switch Route path/home component{Home}/ //home页面 Route path/home/a/b component{Home}/ //没有a文件b页面依旧显示home Route path/a/home/b component{Home}/ //没有a文件b页面什么也不显示 //以上就是路由的模糊匹配从左到右依次匹配有就显示如果开头就没有就不继续往下进行匹 配 //相反 Route exact{true} path/home component{Home}/ //严格匹配 Route exact path/home component{Home}/ //严格匹配 /Switch /BrowserRouter1.默认使用的是模糊匹配输入的路径必须包含要匹配的路径且顺序要一致2.开启严格模式Route exact{true} path/home component{Home}/3.严格匹配不要随便开启需要时再开有些时候开启会导致无法继续匹配二级路由9Redirct重定向import { Route,BrowserRouter,SwitchRedirct } import react-router-dom BrowserRouter Switch Route path/home component{Home}/ Route path/about component{About}/ Redirct path/home / //当路由没有/home、没有/about,页面会直接显示home页面。 /Switch /BrowserRouter一般写在所有路由注册的最下方当所有路由都无法匹配时跳转到Redirect指定的路由10嵌套路由import { Route,BrowserRouter,Switch } import react-router-dom BrowserRouter Switch Route path/about/a component{About}/ Route exact path/home/about component{Home}/ // 路由是/home页面是不会展示的 Redirct path/home/b /Switch /BrowserRouter1.注册子路由时要写上父路由的path值2.路由的匹配是按照路由的顺序进行的三、路由传参1、向路由组件传递params参数import { BrowserRouter, Link,Route } from react-router-dom BrowserRouter //向路由组件传递params参数 Link to{/about/${参数}} activeAbout/Link //声明接收params参数 Route path/about:params component{About} / // Link to{/about/${参数1}/{参数二}} activeAbout/Link //Route path/about/:params1/:params2component{About} / /BrowserRouter在About组件中打印 this.propsthis.props.match.params就是你传递的路由参数集合。* 路由链接(携带参数) Link to/about/18About/Link* 注册路由(声明接收) Route path/about/:params1 component{About} /* 接收参数 const { params1 } this.props.match.params2、向路由组件传递search参数import { BrowserRouter, Link,Route } from react-router-dom BrowserRouter //向路由组件传递search参数 Link to{/about/?params${this.state.params1}}About/Link //search无需声明正常注册 Route path/about component{About} / /BrowserRouter在About组件中打印 this.props开发中参数最好是对象的形式。querystringReact内置import qs from querystring let obj { name:a,age:18 } qs.stringify(obj) //nameaage18 let str nameaage18 qs.parse(str) //{ name:a,age:18 }3、向路由组件传递state参数import { BrowserRouter, Link,Route } from react-router-dom BrowserRouter //向路由组件传递state参数 Link to{/about,state:{ name:this.state.name,age:this.state.age }}About/Link Route path/about component{About} / /BrowserRouter在About组件中打印 this.props4、push和replace路由默认是push模式也就是说路由的变换在浏览器中是有记录的可以正常执行浏览的回退操作。而replace是替换路由在浏览器中是没有记录的import { BrowserRouter, Link,Route } from react-router-dom BrowserRouter Link replace{true} to{/about,state:{ name:this.state.name,age:this.state.age }}About/Link // Link replace{true} to{/about,state:{ name:this.state.name,age:this.state.age }}About/Link Route path/about component{About} / /BrowserRouter