Dismiss
Join GitHub today
GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
React 实践项目 (四) #9
Comments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Yuicon commented 2 days ago • edited
上回说到使用Redux-saga 管理 Redux 应用异步操作,应用还是只有一个首页.现在开始构建一个新的投稿页面并使用 React-Router 进行路由管理.
React 实践项目 (一)
React 实践项目 (二)
React 实践项目 (三)
React 实践项目 (四)
- 首先我们来构建投稿页面
创建 src/containers/SubmitEntry.js
相关的Redux部分已经讲过.就不重复介绍了,感兴趣的可以查看示例代码
页面创建好了,开始使用 React-Router 管理路由
首先是添加依赖
编辑 package.json
Router:
Router 一共有三种,我们采用的是常用的 browserHistory
browserHistory h5的history
hashHistory 老版本浏览器的history
memoryHistory node环境下的history,存储在memory中
Route :
每个 Route 标签都对应一个UI页面,它的职责就是当页面的访问地址与 Route 上的 path 匹配时,就渲染出对应的 UI 界面。
而
<Route component={Header}/>
是没有 path 的,这意味着在每个页面都会渲染出 Header 组件.exact :
Route 上的 exact props 表示采用严格匹配,页面的访问地址与 Route 上的 path 必须一样
<Route exact path="/" component={Index}/>
只会匹配 '/' , 不会匹配 '/submit-entry'<Route path="/" component={Index}/>
会匹配所有 '/' 开头的路径history:
常用方法
push(path, [state]) 在历史堆栈信息里加入一个新条目。
常用于页面跳转,如:
this.props.history.push('/');
跳转至首页replace(path, [state]) 在历史堆栈信息里替换掉当前的条目 与 push 的区别是无法通过历史堆栈返回跳转前的页面
goBack() 等同于浏览器的后退键
match:
match 对象包含了 Route 如何与 URL 匹配的信息,具有以下属性:
params: object 路径参数,通过解析 URL 中的动态部分获得键值对
isExact: bool 为 true 时,整个 URL 都需要匹配
path: string 用来匹配的路径模式,用于创建嵌套的
url: string URL 匹配的部分,用于嵌套的
常用于获取路径中的参数
有这样一个路由
<Route path="/:id" component={Child}/>
在 Child 中可以这样获取到 id 参数
this.props.match.params.id
结语
现在我们得到了一个可以见人的应用了,剩下的大部分是一些业务代码。为了检验效果当然是选择部署到服务器。下篇文章将会介绍利用 nginx 的 docker 镜像部署 React 应用。
完整项目代码地址:github.com/DigAg/digag…