1.安装依赖:
npm install --save react-router-dom。
2.增加页面:
view:视图文件-页面或一部分页面的视图。
3.配置路由文件
4.精准匹配:
exact和strict
strict:是否匹配后面多余的”/”。
5.Link跳转
6.导航高亮的处理:NavLink
首页
.nav ul{
overflow: hidden;
clear: both;
}
.nav ul li{
float: left;
margin: 0 20px;
}
.active{
color: red;
}
7.404页面和Switch的使用
404页面放在最后。
Switch的使用:
8.BrowserRouter和HashRouter
表现:HashRouter有#,BrowserRouter没有。
打包时:BrowserRouter需要重定向。
9.404页面用render function进行处理
<Route render={()=>{
return
}}>
10.参数传递
(1). url: http://localhost:3000/details/10001
(2).url: http://localhost:3000/details/10001?name=jack
11.Link to Object
12.编程式导航
push和replace的区别:push添加,replace是替换页面,主要体现,是否可以回退。
13.路由的作用域
被路由直接管理的对象,存在history,否则则不存在。
解决方案1:传递history。
this.props.history.push(“/”);
解决方案2:使用高阶组件
export default withRouter(Game);
14.路由的嵌套
二级路由 三级路由等
-
创建子页面:People->Student Worker
-
修改路由配置
-
在对应要显示的页面people增加显示方案。
{this.props.children} -
增加子路由的导航
15.重定向
引入:
默认值:
16.单页面应用(SPA)
优点:解决多页面访问速度问题,提升了页面访问速度。
框架也有缺点:SEO问题解决的不好。