P02: 使用ReactRouter制作网页
目录
通过上节的学习,你可能发现这和我们平时工作中见到的不太一样,现实中是每个页面都是一个完整的有状态组件,然后我们再进行跳转,而不是写在一个页面里的多个无状态组件。所以觉的不太适用,本文就把上节课的案例,做成我们工作中的样子,或者说更贴合实际开发,同时还会讲解一下精确匹配的知识。
编写 Index 组件
先在/src
目录下建立一个文件夹,这里起名叫做Pages
(你可以起任何名字),然后建立一个组件文件Index.js
。这里边我们就完全按照工作中的模式来写,只是没有什么业务逻辑,UI 也制作的相当简单。代码如下:
import React, { Component } from 'react'; class Index extends Component { constructor(props) { super(props); this.state = { } } render() { return ( <h2>mybj123.com</h2> ); } } export default Index;
编写 List 组件
编写完Index
组件以后,继续编写List
组件。其实这个组件和Index
基本一样。代码如下:
import React, { Component } from 'react'; class List extends Component { constructor(props) { super(props); this.state = { } } render() { return ( <h2>List Page</h2> ); } } 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 ( <Router> <ul> <li> <Link to="/">首页</Link> </li> <li><Link to="/list/">列表</Link> </li> </ul> <Route path="/" exact component={Index} /> <Route path="/list/" component={List} /> </Router> ); } export default AppRouter;
现在看起来就和我们实际工作中差不多了,也和我们平时写的普通html
页面很类似了。
exact 精准匹配的意思
精准匹配到底是什么?其实这个很好理解,从字面上就可以猜出结果,就是你的路径信息要完全匹配成功,才可以实现跳转,匹配一部分是不行的。
比如我们把Index
的精准匹配去掉,你会发现,无论你的地址栏输入什么都可以匹配到Index
组件,这并不是我们想要的结果。
<Route path="/" component={Index} />
所以我们加上了精准匹配exact
。你可以再试着访问一下List
组件,来更深入的了解一下精准匹配。
本文内容就这些,不要走开,更好的在后面。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P02: 使用ReactRouter制作网页
码云笔记 » P02: 使用ReactRouter制作网页