1、npx create-react-app 项目名, 搭建项目没有src
原因:create-react-app脚手架版本过低
解决:
- 先卸载下:npm uninstall -g create-react-app
- 再重新安装:npm install -g create-react-app
- 接着运行:create-react-app 项目名
- 然后进入文件夹:cd 文件夹,npm start 就ok了
2、路由配置
安装路由:npm install --save react-router react-router-dom
新建router文件夹,建index.js
import React from 'react';
import {Router,Route,Switch,Redirect} from 'react-router-dom';
import { createHashHistory } from "history";
import Login from '../pages/login/Login';
import HomeMenu from '../pages/home/HomeMenu';
import 'antd/dist/antd.css';
const history = createHashHistory();
class RouterConfig extends React.Component{
render(){
return(
<Router history={history}>
<Switch>
<Route path='/' exact render={()=>(
<Redirect to='/login'/>
)}/>
<Route path='/login' component={Login}/>
<Route path='/home' component={HomeMenu}/>
</Switch>
</Router>
)
}
}
export default RouterConfig;
入口文件引入
import React from 'react';
import ReactDOM from 'react-dom';
import RouterConfig from './router/index.js';
ReactDOM.render(<RouterConfig/>,document.getElementById('root'));
关于路由和组件的匹配显示(左侧菜单,右侧内容)
<Link to="/xxx/xxx">菜单1</Link>
定义路由跳转<Switch><Route path='/xxx/xxx' component={MyServer}></Switch>
接收路由内容- router.js中也需要配置对应路由地址
import { Route, Switch, Link,Redirect } from 'react-router-dom';
...
render(){
return(
<div className="conBox">
<Menu
className="leftCon"
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ width: 256 }}
>
<SubMenu key="sub1" title={
<span>
<img src={fuwu} style={{width:'15px',height:'15px',marginRight:'10px'}}/>
<span>菜单</span>
</span>
}
>
<Menu.Item key="1"><Link to="/home/server/page1">菜单1</Link></Menu.Item>
<Menu.Item key="3"><Link to="/home/server/page2">菜单2</Link></Menu.Item>
</SubMenu>
</Menu>
<div className="rightCon">
<Switch>
<Route path='/home/server' component={MyServer}>
<Route path='/home/server/page1' component={页面1}/>
<Route path='/home/server/page2' component={页面2}/>
</Route>
{/* 默认进入第一个界面 */}
<Redirect to='/home/server/page1'/>
</Switch>
</div>
</div>
)
}
3、antd-design样式不生效
其实很简单,在入口的js中
import ‘antd/dist/antd.css’;
4、antd-design使用中文提示
入口文件引入,包裹所有内容
import { ConfigProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
...
return(
<ConfigProvider locale={zh_CN}>
内容
</ConfigProvider>
)
5、svg图片的使用
import CustomIcon from './aa.svg';
render(){
return(<img src={CustomIcon}/>)
}