React在Github上已经有接近70000的 star 数了，是目前最热门的前端框架。而我学习React也有一段时间了，现在就开始用 React+Redux 进行实战！
上回说到使用Redux-saga 管理 Redux 应用异步操作,应用还是只有一个首页.现在开始构建一个新的投稿页面并使用 React-Router 进行路由管理.
React 实践项目 （一）
React 实践项目 （二）
React 实践项目 （三）
React 实践项目 （四）
- 首先我们来构建投稿页面
创建 src/containers/SubmitEntry.js
/**
* Created by Yuicon on 2017/7/13.
* https://github.com/Yuicon
*/
import React,{Component} from 'react';
import {Button,Form,Input,Switch,Notification} from "element-react";
import {connect} from "react-redux";
import {createEntryAction} from '../../redux/action/entries';
import './SubmitEntry.css';
@connect(
(state) => {
return ({
entries: state.entries,});
},{createEntryAction: createEntryAction}
)
export default class SubmitEntry extends Component {
constructor(props) {
super(props);
this.state = {
form: {
title: '',content: '',original: true,originalUrl: null,english: false,type: 'article',},loading: false,};
}
componentWillReceiveProps(nextProps) {
if (nextProps.entries.get('saveSuccess')) {
Notification.success({
title: '成功',message: '投稿成功',duration: 1500
});
this.setState({form: {
title: '',}});
} else if (nextProps.entries.get('error')) {
Notification.error({
title: '错误',message: nextProps.entries.get('error'),type: 'success',duration: 1500
});
}
this.setState({loading: false});
}
handleSubmit = () => {
this.props.createEntryAction(this.state.form);
this.setState({loading: true});
};
handleChange = (key,value) => {
this.setState({
user: Object.assign(this.state.form,{[key]: value})
});
};
render(){
return(
<div className="SubmitEntry-container">
<div className="head">
<h2>推荐文章到掘金</h2>
<p>感谢分享，文章的审核时间约1-2个工作日</p>
</div>
<div className="entry-form">
<Form model={this.state.form} labelWidth="80" onSubmit={this.handleSubmit}>
<Form.Item label="分享网址">
<Input value={this.state.form.originalUrl} onChange={this.handleChange.bind(this,'originalUrl')}/>
</Form.Item>
<Form.Item label="标题">
<Input value={this.state.form.title} onChange={this.handleChange.bind(this,'title')}/>
</Form.Item>
<Form.Item label="描述">
<Input value={this.state.form.content} onChange={this.handleChange.bind(this,'content')}/>
</Form.Item>
<Form.Item >
<Switch
value={this.state.form.original}
onChange={this.handleChange.bind(this,'original')}
onText="原创"
offText="转载">
</Switch>
</Form.Item>
<Form.Item >
<Switch
value={this.state.form.english}
onChange={this.handleChange.bind(this,'english')}
onText="英文"
offText="中文">
</Switch>
</Form.Item>
<Form.Item >
<Button type="primary" onClick={this.handleSubmit} loading={this.state.loading}>
发布
</Button>
</Form.Item>
</Form>
</div>
</div>
)
}
}
相关的Redux部分已经讲过.就不重复介绍了,感兴趣的可以查看示例代码
编辑 package.json
// react-router-dom 包含 react-router
"react-router-dom": "^4.1.1",
编辑 App.js
/**
* Created by Yuicon on 2017/6/25.
*/
import React,{ Component } from 'react';
import {BrowserRouter as Router,Route} from 'react-router-dom'
import './App.css';
import Index from "../Index/Index";
import Header from "../Header/Header";
import SubmitEntry from "../SubmitEntry/SubmitEntry";
export default class App extends Component {
render(){
return(
<Router>
<div className="App">
<Route component={Header}/>
<Route exact path="/" component={Index}/>
<Route exact path="/submit-entry" component={SubmitEntry}/>
</div>
</Router>
)
}
}
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 用来匹配的路径模式，用于创建嵌套的 <Route>
url: string URL 匹配的部分，用于嵌套的 <Link>
常用于获取路径中的参数
有这样一个路由 <Route path="/:id" component={Child}/>
在 Child 中可以这样获取到 id 参数 this.props.match.params.id
