如何从零创建一个React + Antd + React路由项目
开始之前
- 本文是以基于React + TypeScript 环境作为例子。
- 本文默认使用 yarn 作为包管理器，npm 使用差异无几，可自行查阅相关资料进行转换或安装 Yarn 后尝试本文操作流程来创建您的 React 项目。
一、创建 React 项目 (TypeScript)
1. 创建 React 项目
yarn create react-app antd-demo-ts --template typescriptantd-demo-ts 表示你的项目名称，可以自己取一个。
$ cd antd-demo-ts
$ yarn start创建完成后，就可以 cd 到项目目录中，npm start 运行，即可弹出项目的初始默认站点，说明 OK 了。
二、集成 Antd UI框架
参考资料：https://ant-design.gitee.io/docs/react/use-in-typescript-cn
1. 引入 Antd
yarn add antd修改 src/App.tsx，引入 antd 的按钮组件。
import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';
const App: FC = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;修改 src/App.css，在文件顶部引入 antd 的样式。
@import '~antd/dist/antd.css';重新启动 yarn start，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的官方文档。
antd 使用 TypeScript 书写并提供了完整的定义，你可以享受组件属性输入建议和定义检查的功能。
三、创建 React-Router 作为项目路由
如果我们的项目并不是一个单页应用，那么一定需要用到 React-Router 作为我们的项目路由来进行 URL 跳转。
参考资料：React Router 中文文档 ，本文则使用 react-router-dom 作为路由主键（它是基于 react-router 来的，多了一些页面上的dom操作而已，参考：区别）
1. 引入路由组件
yarn add @types/react-router-dom
yarn add react-router-dom附加说明：@types/react-router-dom只是 TypeScript 的声明文件而已，还是要安装 react-router-dom 核心代码。
2. 修改 App.tsx 文件代码如下：
import React from 'react';
import { BrowserRouter as Router, Link, Route, RouteComponentProps } from 'react-router-dom';
import { Button } from 'antd';
import './App.css';
function Home(props: any) {
let toHome = () => {
props.history.push('/custom');
};
return (<div>
测试首页
{/* 使用js代码来跳转 */}
<Button onClick={toHome} type="primary">跳转到自定义页面</Button>
</div>)
}
function News(props: any) {
console.log('news ,props', props)
return (<div>新闻页</div>)
}
function About() {
return (<div>关于页</div>)
}
function Custom() {
return (<div>自定义页面</div>)
}
export interface AppProps extends RouteComponentProps {
history: any;
}
class App extends React.Component {
toCusomtPage = () => {
console.log(this.props)
}
render() {
return (
<div className="App">
{/* 使用 Link 组件来跳转 */}
<Router>
<div>
<Link to="/"> 首页 </Link>
<Link to="/news"> 新闻页 </Link>
<Link to="/about"> 介绍页 </Link>
</div>
<Route path="/" exact component={Home} />
<Route path="/news" component={News} />
<Route path="/about" component={About} />
<Route path="/custom" component={Custom} />
</Router>
</div>
);
}
}
export default App;
即可实现路由、路由控件跳转、js代码跳转
四、结束
至此，已经可以自己在代码中配置各个页面的路由途径。
在 Ant Design 组件 中选择符合自己需求的组件放上去即可开始自己的业务编写。
关于 React 与 TypeScript 的入门参考资料推荐：利用 typescript 写 react-router 5