目录

标签： Antd

如何从零创建一个React + Antd + React路由项目

开始之前

  1. 本文是以基于React + TypeScript 环境作为例子。
  2. 本文默认使用 yarn 作为包管理器，npm 使用差异无几，可自行查阅相关资料进行转换或安装 Yarn 后尝试本文操作流程来创建您的 React 项目。

一、创建 React 项目 (TypeScript)

1. 创建 React 项目

yarn create react-app antd-demo-ts --template typescript

antd-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