前面两篇写了如何初始化一个项目以及安装 redux、router、axios和antd
搭建一个React-redux-router + antd项目(一)初始化项目
搭建一个React-redux-router + antd项目(二)安装 redux、router、axios和antd
下面搭建路由,实现页面间的跳转。
在src目录下新建一个main文件夹用来存放后续的页面组件文件,在main下创建一个/index/index.js 文件夹,并创建一个Index组件:
// src/main/index/index.js
import React, {Component} from "react";
export default class Index extends Component {
render() {
return(
<div>首页</div>
)
}
}
在src目录下新建一个router文件夹用来存放路由文件,在router目录下创建一个/router/router.js的文件夹,并创建一个Router路由组件:
// src/router/router.js
import React, {Component} from "react";
import {Switch, Route, Redirect} from "react-router-dom";
// 引入前面创建的Index组件
import Index from "../main/index/index"
export default class Router extends Component {
render() {
return(
<Switch>
{/* 使用Redirect指定/index为默认首页 */}
<Route path="/" exact render={() => (<Redirect to="/index" />)} />
<Route path="/index" component={Index} />
</Switch>
)
}
}
打开App.js,引入路由
// app.js
- import { Button } from 'antd';
+ import Rounter from './router/router'
<div className="App">
- <Button type="primary">Button</Button>
+ <Rounter />
</div>
打开Index.js,指定路由跳转方式
+ import { HashRouter } from "react-router-dom";
+ <HashRouter>
<App />
+ </HashRouter>
也可以使用 BrowserRouter 但这里建议使用 HashRouter 配置简单,BrowserRouter需要后台配合使用。
此时已配置好首页的路由了,因为已将Index 设为了默认首页 这时候访问 localhost:3000时会自动访问localhost:3001/#/index,页面中会出现“首页”二字。
搭建一个React-redux-router + antd项目(四)redux初始
搭建一个React-redux-router + antd项目(五)用action更新store
搭建一个React-redux-router + antd项目(六)用 redux-persist 实现数据持久化