React 路由 对SPA的理解 1.单页Web应用(single page web application,SPA)。 2.整个应用只有一个完整的页面。 3.点击页面中的链接不会刷新页面,只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展现。
路由的理解 1.什么是路由 1.一个路由就是一个映射关系(key:value) 2.key为路径, value可能是function或component
2.路由分类 1.后端路由: 1)理解: value是function, 用来处理客户端提交的请求。 2)注册路由: router.get(path, function(req, res)) 3)工作过程:当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据 2.前端路由: 1)浏览器端路由,value是component,用于展示页面内容。 2)注册路由: 3)工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件
react-router-dom的理解 1.react的一个插件库。 2.专门用来实现一个SPA应用。 3.基于react的项目基本都会用到此库。
3.路由的基本使用 1.明确好界面中的导航区、展示区 2.导航区的a标签改为Link标签 Demo 3.展示区写Route标签进行路径的匹配 <Route path='/xxxx’ component={Demo}/> 4. 的最外侧包襄了一个或
5.NavLink与封装NavLink
1.NavLink可以实现路由链接的高亮,通过activeClassName指定样式名
2.标签体内容是一个特殊的标签属性
3.通过this.props.children可以获取标签体内容
BrowserRouter与HashRouter的区别 1.底层原理不一样: BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 2.path表现形式不一样 BrowserRouter的路径中没有#,例如:localhost:3000/demo/test HashRouter的路径包含#,例如:localhost:3000/#/demo/test 3.刷新后对路由state参数的影响 1).BrowserRouter没有任何影响,因为state保存在history对象中。 2).HashRouter刷新后会导致路由state参数的丢失!!! 4.备注:HashRouter可以用于解决一些路径错误相关的问题。