一个简单的手艺人

0%

实现React布局路由

发表于 更新于 分类于 Disqus：

前言

疫情在家，本来开年就要入职的公司，入职时间是一拖再拖，这里真的是吐槽一下。在家呆着爸妈鼻子不是鼻子眼睛不是眼睛的，我心里也是日了狗，从新投简历，某些傻缺HR，一来就问你会Yii吗？我就纳闷了，现在的框架哪个不是容器搞一通。

哎，抱怨没用，动手最实际，朋友要我帮忙做个管理后台，用React帮他做，不得不说一个小白尽然也知道React了。这个前端框架的知名度不得不说。我图省事儿样式让我写不可能的用Ant Design吧。

搭架子过程

反正就是一堆命令什么

1
mkdir manager_beta && cd manager_beta
2
npx create-react-app .

漫长的等待…期间我打开了书，看了看JavaScript 设计模式，架子是搭建完了，开始antd的安装

1
npm i --save antd
2
npm i --save react-router-dom

默认的create-react-app下面不是不会暴露出配置文件的，所以还要执行一下命令，为什么还要配置，作为开发人员，配置都不自己控制，总是不安心的。好吧，其实我是要用less这东西得配置吖。

1
npm run eject
2
npm i --save less less-loader

接下来就是把下面这段配置放入config\webpack.config.js中了

1
// line: 50行左右
2
const lessRegex = /\.(less)$/;
3
const lessModuleRegex = /\.module\.(less)$/;
4
5
// line: 487行左右
6
{
7
    test: lessRegex,
8
        exclude: lessModuleRegex,
9
            use: getStyleLoaders({ importLoaders: 3 }, 'less-loader'),
10
},
11
{
12
    test: lessModuleRegex,
13
    use: getStyleLoaders(
14
        {
15
            importLoaders: 3,
16
            modules: true,
17
            getLocalIdent: getCSSModuleLocalIdent,
18
            modifyVars:{},
19
            javascriptEnabled: true,
20
        },
21
        'less-loader'
22
    ),
23
},

其实上面写的对我要说的怎么 实现React布局路由 有什么关系呢？好吧，我告诉你，一点关系都没有哈哈哈，我就是骗骗字数。

其实这个路由实现很简单，无非就是对react-router-dom的一个简单封装。用代码举例子吧。

1
import React from 'react';
2
import { Route, Switch } from 'react-router-dom';
3
4
const LayoutRoute = ({ component: Component, layout: Layout, ...rest}) => {
5
    return (
6
        <Route {...rest} render={props => (
7
			<Layout>
8
                <Component {...props} />
9
            </Layout>
10
        )} />
11
    );
12
}
13
14
const MainLyout = props => (
15
    <div>
16
        <h1>Main</h1>
17
        {props.children}
18
    </div>
19
);
20
21
const OtherLyout = props => (
22
    <div>
23
        <h1>Other</h1>
24
        {props.children}
25
    </div>
26
);
27
28
const PgOne = () => {
29
    return (<p>PgOne</p>);
30
}
31
32
const XiaoluLi = () => {
33
    return (<p>XiaoluLi</p>)
34
}
35
36
const App = () => (
37
    <div>
38
        <Switch>
39
        	<LayoutRoute exact path="/pgone" layout={MainLyout} component={PgOne}/>
40
            <LayoutRoute exact path="/xiaoluli" layout={OtherLyout} component={XiaoluLi}/>
41
        </Switch>
42
    </div>
43
)
44
45
ReactDOM.render(
46
  <App />,
47
  document.getElementById('root')
48
);

其实就是利用了组件props传值的方式实现了这个方法，扩展了Route。

总结

希望疫情快点过去，还有就是世界和平，别再来什么幺蛾子了。还有就是求工作吖。