react项目搭建遇到的问题

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}/>)
}