项目准备:
1、编辑器这里我采用的是Webstrom
2、创建react-app项目和引入antd-design框架;参考链接:
https://ant.design/docs/react/use-with-create-react-app-cn
准备工作完成后开始创建目录(个人推荐):
1、创建目录
2、创建布局主框架并创建router.js
安装react-router-dom
yarn add react-router-dom
安装前:
安装成功:
安装后:
然后在Routes文件夹下创建Router.js文件
3、新建两个组件
在Component文件夹下新建一个Home和Login文件夹,然后在对应的文件夹下面新建Home.js和Login.js
接下来给这两个页面分配路由,编写router.js
import React,{Component} from 'react';
import {HashRouter,Route,Switch} from 'react-router-dom';
import Home from "../Component/Home/Home";
import Login from "../Component/Login/Login";
class Router extends Component{
render() {
return (
<div>
<HashRouter>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
</Switch>
</HashRouter>
</div>
);
}
}
export default Router;
然后修改index.js里的内容
接着运行yarn start就会看见
http://localhost:3000/#/
http://loaclhost:3000/#/login