yarn add react-app-rewired customize-cra //使用装饰器引入ant组件
1、项目/config-overrides.js
const {
override
} = require("customize-cra")
module.exports=override(
)
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
2、重启项目
3、配置less
npm install less less-loader -D
const {
override,
addLessLoader
} = require("customize-cra")
module.export=override(
addLessLoader({
javascriptEnabled: true
})
)
4、引入ant组件库
//按需引入
yarn add babel-plugin-import
//引入组件库
yarn add antd
const {
override,
addLessLoader,
fixBabelImports
} = require("customize-cra")
module.exports=override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true
})
)
5、定制主题
module.exports={
"@primary-color": "#52c41a", // 全局主色
"@link-color": "#1890ff",// 链接色
"@success-color": "#52c41a" // 成功色
}
const {
override,
addLessLoader,
fixBabelImports
} = require("customize-cra")
//引入定制的颜色 在页面调用就可以使用了
const modifyVars=require("./antD")
module.exports=override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars
})
)
6、进行符合装饰器的配置
yarn add @babel/plugin-proposal-decorators
const {
override,
addLessLoader,
fixBabelImports,
addDecoratorsLegacy,
} = require("customize-cra")
const modifyVars=require("./antD")
module.exports=override(
addDecoratorsLegacy(),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars
})
)
//直接在页面使用高阶组件装饰器就可以了
@testHoc
class App extends Component {
render() {
return (
<div>
App<Button type="primary">rrrrrr</Button>
</div>
)
}
}
空文件夹文件不会跟踪
7、外层路由的配置(Login/404页面)
yarn add react-router-dom
外层路由的配置
import React, { Component } from 'react'
import { render } from "react-dom"
import App from "./App"
import { BrowserRouter as Router, Route , Switch, Redirect} from "react-router-dom"
import {mainRouter} from "./routes"
render(
<Router>
<Switch>
<Route path="/admin" render={(routerProps)=>{
//权限 需要登录才能访问admin
return <App {...routerProps}/>
}}>
</Route>
{
mainRouter.map(route=>{
return <Route
path={route.pathname}
component={route.component}
key={route.pathname}
></Route>
})
}
<Redirect to="/admin" from="/" exact/>
<Redirect to="/404"/>
</Switch>
</Router>,
document.querySelector("#root")
)
8、内层路由的配置(admin)
import React, { Component } from 'react'
import { Route , Switch, Redirect} from "react-router-dom"
import { adminRouter } from "./routes"
class App extends Component {
render() {
return (
<div>
<div>gggg</div>
<Switch>
{
adminRouter.map(router=>{
return (
<Route
path={router.pathname}
key={router.pathname}
render={(routerProps)=>{
return <router.component {...routerProps}/>
}}
exact={router.exact}
/>
)
})
}
<Redirect to={adminRouter[2].pathname} from="/admin" exact/>
<Redirect to="/404"/>
</Switch>
</div>
)
}
}
export default App
9、路由的懒加载
import 返回一个promise
yarn add react-loadable
import Loadable from "react-loadable"
import { Loading } from "../components"
// import Dashboard from "./Dashboard"
// import Login from "./Login"
// import Settings from "./Settings"
// import AriticleList from "./Ariticle"
// import Edit from "./Ariticle/Edit"
// import NotFound from "./NotFound"
const Dashboard=Loadable({
loader:()=>import("./Dashboard"),
loading:Loading
})
const Login=Loadable({
loader:()=>import("./Login"),
loading: Loading
})
const Settings=Loadable({
loader:()=>import("./Settings"),
loading: Loading
})
const AriticleList=Loadable({
loader:()=>import("./Ariticle"),
loading: Loading
})
const Edit=Loadable({
loader:()=>import("./Ariticle/Edit"),
loading: Loading
})
const NotFound=Loadable({
loader:()=>import("./NotFound"),
loading: Loading
})
export {
Dashboard,
Login,
Settings,
AriticleList,
Edit,
NotFound
}
10、在App中引入模板，并将路由在组件中渲染 （通过this.props.children）
import React, { Component } from 'react'
import { Route , Switch, Redirect} from "react-router-dom"
import { adminRouter } from "./routes"
import { Frame } from "./components"
const menu=adminRouter.filter(route=>route.isNav===true)
class App extends Component {
render() {
return (
<Frame menu={menu}>
<div>全局组件</div>
<Switch>
{
adminRouter.map(router=>{
return (
<Route
path={router.pathname}
key={router.pathname}
render={(routerProps)=>{
return <router.component {...routerProps}/>
}}
exact={router.exact}
/>
)
})
}
<Redirect to={adminRouter[2].pathname} from="/admin" exact/>
<Redirect to="/404"/>
</Switch>
</Frame>
)
}
}
export default App
11、组件之间基本的路由跳转
使用 menu 的onCLick方法获取参数中的key
使用withRouter高阶组件 使组件拥有路由参数
this.props.history.push（key）实现路由的跳转
12、实现自动选中
<Menu
mode="inline"
selectedKeys={[this.props.location.pathname]}
defaultOpenKeys={['sub1']}
style={{ height: '100%', borderRight: 0 }}
onClick={this.onClickRoute.bind(this)}
>
