react hook仿造掘金博客项目

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，说明按需加载成功。

创建reset.less文件

---

/**

• 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’)

);

修改index.html文件

---

<meta

name=“description”

content=“抓不住爱情的我 总是眼睁睁看她溜走 世界上幸福的人到处有 为何不能算我一个”

/>

### 总结

前端资料汇总

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！