将多页面框架中的 index 页面改成单页面应用框架

原创

lqmeta

修改于 2020-07-05 15:01:30

1.8K0

文章被收录于专栏：得一得一

本文基于“基于create-react-app构建多页面应用框架”项目框架，将其中的 index 页面改成单页面应用框架。

使用 react-router-dom 做页面的路由管理:

npm i --save react-router-dom

1、修改 index.js

index.js 引入 App.js，页面的路由管理在 App.js 中进行管理。

2、页面路由管理 App.js

使用 react-router-dom 的 HashRouter 对页面进行路由转发。

import React from 'react';
import { HashRouter, Route, Switch } from "react-router-dom";

const NoMatch = React.lazy(() => import(/* webpackChunkName: "components/NoMatch" */ './../../components/NoMatch/NoMatch'));
const Home = React.lazy(() => import(/* webpackChunkName: "index/Home" */ './views/Home/Home'));
const Test = React.lazy(() => import(/* webpackChunkName: "index/Test" */ './views/Test/Test'));

function App(props) {

  return (
    <HashRouter>
      <React.Suspense fallback={''}>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route exact path='/test' component={Test} />
          <Route component={NoMatch} />
        </Switch>
      </React.Suspense>
    </HashRouter>
  )
}

export default App;

项目框架的结构

项目框架的结构如下所示：

multiple-page
├── README.md
├── config
│   ├── env.js
│   ├── getHttpsConfig.js
│   ├── jest
│   │   ├── cssTransform.js
│   │   └── fileTransform.js
│   ├── modules.js
│   ├── paths.js
│   ├── pnpTs.js
│   ├── webpack.config.js
│   └── webpackDevServer.config.js
├── package.json
├── public
│   ├── favicon.ico
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
├── src
│   ├── components
│   │   └── NoMatch
│   │       ├── NoMatch.js
│   │       └── NoMatch.less
│   └── views
│       ├── demo
│       │   ├── demo.html
│       │   └── demo.js
│       └── index
│           ├── App.js
│           ├── index.html
│           ├── index.js
│           └── views
│               ├── Home
│               │   ├── Home.js
│               │   └── Home.less
│               └── Test
│                   ├── Test.js
│                   └── Test.less
├── tools.js
└── yarn.lock

访问 index.html 的 Home 页面

http://localhost:3000

访问 index.html 的 Test 页面

http://localhost:3000/#/test

index.html HashRouter 路由未匹配到页面时

http://localhost:3000/#/test-no-match

webpack 增加 less loader

由于 create-react-app 框架默认是没有加入 less loader 的，所以需要我们添加一下。

1、安装依赖

npm i --save less less-loader

2、修改 config/webpack.config.js

2.1、定义 lessRegex 和 lessModuleRegex

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

2.2、在 module rules 中配置 less-loader

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},