第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)
#课程目标
- 理解路由的原理及应运
- 理解react-router-dom以及内置的一些组件
- 合理应用内置组件及其属性搭建项目路由
#知识点
- 路由的由来
-
路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。这是从路由的用途上来解释路由是什么的，还有一种说法是：路由就是URL到函数的映射。
1-1. hash => 路由的实现就是基于location.hash来实现的。其实现原理也很简单，location.hash的值就是URL中#后面的内容
<a href="#/">主页</a>
<a href="#/home">home</a>
<a href="#/index">index</a>
<div id='content'></div>
<script>
/*
URL中hash值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash部分不会被发送。hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。我们可以使用hashchange事件来监听hash的变化。
*/
class Router{
constructor({routes}) {
this.routes = routes;
this.everyPath = {};
this.init();
this.routes.forEach(item => {
this.everyPath[item.path] = function() {
document.getElementById('content').innerHTML = item.component;
}
})
}
init() {
window.addEventListener('load', this.updateLocation.bind(this))
window.addEventListener('hashchange', this.updateLocation.bind(this))
}
updateLocation() {
let pathRes = window.location.hash.slice(1);
console.log(this.everyPath, '----', pathRes)
this.everyPath[pathRes]();
}
}
new Router({
routes: [
{
path: '/',
component: '主页'
},
{
path: '/home',
component: 'home'
},
{
path: '/index',
component: 'index'
}
]
})
</script>1-2. history => 前面的hash虽然也很不错，但使用时都需要加上#，并不是很美观。因此到了HTML5，又提供了History API来实现URL的变化。其中做最主要的API有以下两个：history.pushState()和history.repalceState()。这两个API可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。
<a href="javascript:;" data-to='/'>去首页</a>
<a href="javascript:;" data-to='/home'>去home页</a>
<a href="javascript:;" data-to='/index'>去index页</a>
<div id="content"></div>
<script>
class Router{
constructor({routes}) {
this.router = routes;
this.init()
this.bindClick();
}
init() {
window.addEventListener('popstate', this.updateView.bind(this));
}
updateView() {
let content = document.getElementById('content');
let clickRes = window.location.pathname
content.innerHTML = this.router.filter(val => val.path === clickRes)[0].component;
}
bindClick() {
let pushA = document.querySelectorAll('a');
[].forEach.call(pushA, item => {
item.addEventListener('click', () => {
let clickRes = item.getAttribute('data-to');
window.history.pushState({}, null, clickRes)
this.updateView()
})
})
}
}
new Router({
routes: [
{
path: '/',
component: '主页'
},
{
path: '/home',
component: 'home'
},
{
path: '/index',
component: 'index'
}
]
})
// 1.状态对象（state object）：一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，会触发popstate事件，并能在事件中使用该对象。
// 2.标题（title）：一般浏览器会忽略，最好传入null。
// 3. 地址（URL）：就是需要新增的历史记录的地址，浏览器不会去直接加载改地址，但后面也可能会去尝试加载该地址。此外需要注意的是，传入的URL与当前URL应该是同源的。
</script>1-3. 两种实现方式的对比：基于Hash的路由实现，兼容性更好；而基于History API的路由，则更正式，更美观，可以设置与当前URL同源的任意URL，路径更直观。此外，基于Hash的路由不需要对服务器做改动，基于History API的路由需要对服务器做一些改造，需要对不同的路由进行相应的处理才行（404）。
-
相应的内置组件
2-1. BrowserRouter
- basename: 该router下路由路径的base url. 应该有一个前置斜杠，但不能有后置斜杠。如果你的页面路由路径为某个子目录，那base url应设置为这个子目录。该页面的其他路由路径即在这个之下。
<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">2-2. HashRouter
- 与BrowserRouter一致
2-3. Link
to: string, 路由链接， 由location的path, search, hash属性拼接而成。
to : object { pathname: 跳转路径，search: 查询参数， hash: url中的hash, eg. #a-hash, state:存储到location中的额外状态数据}
replace: 布尔值- 为true时，将会替换history stack中的当前路径
2-4. NavLink
activeClassName: string, 渲染样式
activeStyle:object, 渲染样式
2-5. Redirect
to: string, url地址
to: object, location object, 属性有：pathname: 跳转路径，search: 查询参数， hash: url中的hash, eg. #a-hash, state:存储到location中的额外状态数据. location中的state可以在redirect跳转组件的this.props.location.state访问
push: 为true表示redirect path将往history stack中推一条新数据而不是替换他
from: redirect from url, 会进行正则匹配。只能用在
component: 当传递component渲染UI时，router将会用React.createElement来将组件封装成一个新的React element, 当传递一个inline func, react每次render都会unmount, mount一个新的组件，会消耗性能，此时可以使用render/children prop
render: func, inline func不会有上述性能问题，参数同route props相同
2-7. Switch
- 渲染或中第一个匹配location的组件，且子元素只能为或
#授课思路
#案例和作业
- 高度还原页面
- 利用react-router-dom搭建整个项目的路由
