exact: true,
component: Root
},
{
path: ‘/detail’,
label: ‘书籍’,
component: Detail
},
{
path: ‘/home’,
label: ‘书籍’,
component: Home,
routes: [
{
path: ‘/home/test’,
label: ‘书籍test’,
component: Test
}
]
},
]
export default routes
安装 react-router-config
npm install --save react-router-config
在index.js中引入并且使用
import ReactDOM from ‘react-dom’;
// import ‘antd/dist/antd.css’;
import { BrowserRouter as Router } from ‘react-router-dom’;
import routes from ‘router/router.js’
import { renderRoutes } from ‘react-router-config’
console.log(routes);
console.log(renderRoutes(routes));
ReactDOM.render(
{renderRoutes(routes)}
, document.getElementById(‘root’)
);
需要注意的是,Home有嵌套路由,则需要在Home中再写一遍renderRoutes,并且 renderRoutes(routes)的routes是在props中获取的,即应该写成renderRoutes(props.route.routes)。
import { Button } from “antd”
import { renderRoutes } from ‘react-router-config’
function Home(props: any) {
console.log(props);
const { routes } = props.route
return (
Home
{
renderRoutes(routes)
}
);
}
export default Home;
这样就实现了
安装 react-loadable
npm i react-loadable @type/react-loadable
使用方式,官方文档已经给出
根据例子创建LoadableComponent.tsx文件
import * as React from ‘react’;
import Loadable from ‘react-loadable’;
import {LoadingComponentProps} from ‘react-loadable’;
import {PageLoading} from ‘components/Loading’;
function Loading(props: LoadingComponentProps) {
if (props.error) {
return “Error! Component failed to load”;
} else {
return ;
}
}
const LoadableComponent = (component: any) => Loadable({
loader: component,
loading: Loading,
});
export default LoadableComponent;
其中components/Loading
// components/Loading
import { Spin } from ‘antd’;
import ‘./style.less’;
export function PageLoading() {
return
;}
//./style.less
.m-page-loading {
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
现在就可以引入 router/router.js中引用
// import Root from ‘pages/App’
// import Home from ‘pages/Home’
import Test from ‘pages/Home/test’
import Detail from ‘pages/Detail’
import LoadableComponent from ‘LoadableComponent’;
const routes = [
{
path: ‘/’,
label: ‘首页’,
exact: true,
component: LoadableComponent(() => import(‘pages/App’)),
},
{
path: ‘/detail’,
label: ‘书籍’,
component: Detail
},
{
path: ‘/home’,
label: ‘书籍’,
component: LoadableComponent(() => import(‘pages/Home’)),
routes: [
{
path: ‘/home/test’,
label: ‘书籍test’,
component: Test
}
]
},
]
export default routes
我们这里Home 使用了按需加载模式,Detail没有,来试一下有没有成功
Home
import { Button } from “antd”
import { renderRoutes } from ‘react-router-config’
console.log(“home”);
function Home(props: any) {
const { routes, } = props.route
console.log(props);
return (
Home
{
renderRoutes(routes)
}
);
}
export default Home;
在Home和Detail文件加个console.log看看。
发现只打印了detail,没打印home,说明按需加载成功。
/**
-
Global Reset of all HTML Elements
-
Resetting all of our HTML Elements ensures a smoother
-
visual transition between browsers. f you don’t believe me,
-
try temporarily commenting out this block of code, then go
-
and look at Mozilla versus Safari, both good browsers with
-
a good implementation of CSS. The thing is, all browser CSS
-
defaults are different and at the end of the day if visual
-
consistency is what we’re shooting for, then we need to
-
make sure we’re resetting all spacing elements.
*/
html,
body {
border: 0;
font-family: “Helvetica-Neue”, “Helvetica”, Arial, sans-serif;
line-height: 1.5;
margin: 0;
padding: 0;
}
div,
span,
object,
iframe,
img,
table,
caption,
thead,
tbody,
tfoot,
tr,
td,
article,
aside,
canvas,
details,
figure,
hgroup,
menu,
nav,
footer,
header,
section,
summary,
mark,
audio,
video {
border: 0;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
code,
del,
dfn,
em,
ins,
q,
samp,
small,
strong,
sub,
sup,
b,
i,
hr,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
legend,
label {
border: 0;
font-size: 100%;
vertical-align: baseline;
margin: 0;
padding: 0;
}
article,
aside,
canvas,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
audio,
video {
display: block;
}
table {
border-collapse: separate;
border-spacing: 0;
caption,
th,
td {
text-align: left;
vertical-align: middle;
}
}
a img {
border: 0;
}
// project custom
- {
word-break: break-all;
}
h2 {
font-size: 28px;
margin-bottom: 35px;
}
h3 {
font-size: 24px;
margin-bottom: 20px;
}
h4 {
font-size: 20px;
margin-bottom: 10px;
}
h5 {
font-size: 16px;
margin-bottom: 6px;
}
/* scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
z-index: 999;
}
::-webkit-scrollbar-track {
//background: #31a0ee;
}
::-webkit-scrollbar-thumb {
background: rgba(144, 147, 153, 0.3);
border-radius: 4px;
}
#root {
height: 100vh;
min-height: 100vh;
}
在入口文件引入
import ReactDOM from ‘react-dom’;
// import ‘antd/dist/antd.css’;
import { BrowserRouter as Router } from ‘react-router-dom’;
import routes from ‘router/router.js’
import { renderRoutes } from ‘router/renderRouter’
import “./reset.less”
ReactDOM.render(
{renderRoutes(routes)}
, document.getElementById(‘root’)
);
<meta
name=“description”
content=“抓不住爱情的我 总是眼睁睁看她溜走 世界上幸福的人到处有 为何不能算我一个”
/>
前端资料汇总
-
框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。
-
算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!