react+antd

新手级别

需要安装 yarn 确定别的方法不知道就是和node 差不多

https://yarnpkg.com/zh-Hans/docs/install#windows-stable

yarn 官方推荐要让你安装Scoop 你可以试一下用npm 命令看可以不，我忘了。。

 npm install -g create-react-app
 create-react-app my-app
 cd my-app
 yarn start

就会打开react 首页

npm i antd react-router-dom axios --save

安装 antd react-router-dom axios

antd 插件中标签设置属性为布尔值的时候 colon ={false} form.item 中的属性冒号是否存在

依赖yarn 不装yarn 的话启动不了，没有配置文件

路由配置

跳转路由是转自原文：https://blog.csdn.net/qishuixian/article/details/80805661

如需测试转到上面地址，下面的是留给我看的，对自己没有信心。。

我新建了一个components 把文件都放在下面除了index

新建router文件夹下有一个router.js

router.js

import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';

import App from '../components/App';

import Home from '../components/home';
import Forget from './../components/forget';
import Login from './../components/login';

const Root = () => (
   <div>
   <Switch>
   <Route
path="/"
render={props => (
<App>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/home" component={Home} />
<Route path="/forget" component={Forget} />
<Route path="/login" component={Login} />
{/*路由不正确时，默认跳回home页面*/}
<Route render={() => <Redirect to="/" />} />
</Switch>
</App>
)}
/>
</Switch>
</div>
);

export default Root;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './style/index.css';
import Root from './router/router';
import {BrowserRouter} from 'react-router-dom';
import * as serviceWorker from './other/serviceWorker';


const mountNode = document.getElementById('root');
ReactDOM.render(
<BrowserRouter>
<Root />
</BrowserRouter>,
mountNode
);

serviceWorker.unregister();

App.js

import React, { Component } from 'react';

class App extends Component {
   render() {
      return <div>{this.props.children}</div>;
   }
}
export default App;

就可以跳路由了把 Link 需要在头部 import 引入也可以用 href Button 是引用 antd 加了href就变成a标签了

import { Link } from 'react-router-dom';

<Link to="/login">12312321</Link>

<Button href="/lose">丢失反馈、找回</Button>

猜你喜欢