React And TypeScript（三：集成React-Router和React-Router-Redux）

前言

需要注意的是，现在react-router已经到了V4版本了，并且官方说这是一个完全重写的版本。所以在我不太熟悉的情况下，保险起见还是先选择V3版本，等以后再更新。

（一）安装React-Router

$ yarn add react-router@3.0.5 @types/react-router@3.0.5 --dev

将

App.tsx

相关三个文件移动到 views下，并改为app开头

在src目录下创建文件

src/routers/index.tsx

，并添加以下内容：

/**
* @component routers
* @description 路由配置
* @time 2018/1/9
* @author ***
**/
import * as React from 'react';
import { Router,Route, IndexRoute } from 'react-router';

import App from '../views/app'; /** 重命名了App.tsx **/
import Hello from '../views/Hello';
import Error from '../views/Error';

export interface Props {
history: any;
}

const RouterConfig = ({ history }: Props)=> {
return (
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute />
<Route path="/demo" component={Hello} >
</Route>
</Route>

<Route path="*" component={Error} />
</Router>
)
};

export default RouterConfig;

项目一般会有个顶层Layout布局放在app.tsx。所以在顶层包装一层。页面样式请自行修改。

（二）增加Error页面

在src目录下创建文件

src/views/Error/index.tsx

，并添加以下内容：

/**
* @component Error
* @description 错误页
* @time 2018/1/9
* @author ***
**/
import * as React from 'react';
import { Button } from 'antd';
import { Link } from 'react-router';

const Error = () => (
<div className="error-container" >
<p />
<div>
<h2>404</h2>
<p>抱歉,你访问的页面不存在</p>
<Button type="primary">
<Link to="/">返回首页</Link>
</Button>
</div>
</div>
);

export default Error;

页面不太美观，需要样式，请自行修改。

（三）安装React-Router-Redux

$ yarn add react-router-redux@4.0.8 @types/react-router-redux@4.0.48 --dev

修改入口文件

/**
* @component index
* @description 全局入口文件
* @time 2018/1/9
* @author ***
**/
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import StoreConfig  from './store';
import { browserHistory } from 'react-router';
import RouterConfig from './routers';
import { syncHistoryWithStore } from 'react-router-redux';
import './index.less';

const store= StoreConfig();
const history= syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
<Provider store={store}>
<RouterConfig history={history} />
</Provider>,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();

我们添加的是browserHistory作为路由，不是hashHistory，所以我们需要对服务器做一些路由配置才行（PS：

ngnix配置跳转

）。至于为什么，请自行搜索，这里不做说明了。如果不想用过多设置，也可以直接把browserHistory替换为hashHistory即可。

在

src/reducers/index.tsx

中添加上routerReducer

/**
* @component reducers
* @description 根reducers
* @time 2018/1/9
* @author ***
**/
import { combineReducers } from 'redux';
import { enthusiasm } from './demo';
import { routerReducer } from 'react-router-redux';

const rootReducer= combineReducers({
demo: enthusiasm,
routing: routerReducer,
});

export default rootReducer;

执行npm run start运行效果。



点击去demo去demo页面。点击error或者在输入栏。输入不合法的url，会跳转到error。

（四）后续

添加开发必备配置

- CSS Modules 链接

因为antd和其有冲突。解决方案

相关代码放在github

后续是项目相关代码，不会提交到这个分支。