npx create-react-app my-app
yarn add --dev less less-loader
const {
override,
addLessLoader
} = require('customize-cra');
module.exports = override(
addLessLoader(),
);
yarn add antd-mobile
yarn add babel-plugin-import --dev
const {
override,
addLessLoader,
fixBabelImports,
} = require('customize-cra');
module.exports = override(
addLessLoader(),
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
})
);
yarn add react-router-dom
const path = require('path');
const {
override,
addLessLoader,
fixBabelImports,
addWebpackAlias,
} = require('customize-cra');
module.exports = override(
addLessLoader(),
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
// 引入别名
addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
})
);
import React from 'react';
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
import Login from '@/pages/login';
import PageNotFount from '@/pages/404';
import Home from '@/pages/home';
import Details from '@/pages/details';
const routes = [
{
path: '/login',
component: Login,
exact: true,
},
{
path: '/404',
component: PageNotFount,
exact: true,
},
{
path: '/',
component: Home,
exact: true,
},
{
path: '/home',
component: Home,
exact: true,
},
{
path: '/details',
component: Details,
exact: true,
},
];
export default function RoutesList() {
return (
<HashRouter>
<Switch>
{routes.map((route, index) => {
return route && route.Redirect ? (
<Redirect key={index} to={route.Redirect} />
) : (
<Route key={route.path} {...route} />
);
})}
<Redirect to="/404" />
</Switch>
</HashRouter>
);
}