React Router
阐述
- 阐述
- 编写Index组件
- 编写List组件
- 修改 `AppRouter.js` 文件
- exact 精准匹配的意思
通过上节的学习,你可能发现这和我们平时工作中见到的不太一样,现实中是每个页面都是一个完整的有状态组件,然后我们再进行跳转,而不是写在一个页面里的多个无状态组件。
所以觉的不太适用,本文就把上节课的案例,做成我们工作中的样子,或者说更贴合实际开发,同时还会讲解一下精确匹配的知识。
编写Index组件先在 /src
目录下建立一个文件夹,这里起名叫做 Pages
(你可以起任何名字),然后建立一个组件文件 Index.js
。这里边我们就完全按照工作中的模式来写,只是没有什么业务逻辑,UI也制作的相当简单。
代码如下: ReactRouterDemo\demo01\src\Pages\Index.js
import React, { Component } from 'react';
class Index extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( Home willem );
}
}
export default Index;
编写List组件
编写完Index组件以后,继续编写List组件。 其实这个组件和Index基本一样。 代码如下: ReactRouterDemo\demo01\src\Pages\List.js
import React, { Component } from 'react';
class List extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( List Page );
}
}
export default List;
修改 AppRouter.js
文件
两个组件制作完成后,我们把它引入路由配置文件,然后进行路由的配置就可以了, 代码如下:
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'
function AppRouter() {
return (
首页
列表
);
}
export default AppRouter;
现在看起来就和我们实际工作中差不多了,也和我们平时写的普通html页面很类似了。
精准匹配到底是什么? 其实这个很好理解,从字面上就可以猜出结果,就是你的路径信息要完全匹配成功,才可以实现跳转,匹配一部分是不行的。
比如我们把Index的精准匹配去掉,你会发现,无论你的地址栏输入什么都可以匹配到Index组件,这并不是我们想要的结果。
所以我们加上了精准匹配 exact。 你可以再试着访问一下List组件,来更深入的了解一下精准匹配。