从零搭建一个react-hooks项目（三）

从零搭建一个react-hooks项目（三）

• 上一篇我们配置了项目相关，包括代码压缩混淆，开发生产配置抽离，图片与文字的引入使用等
• 接下来我们就配置一下react-router，react-redux与typescript
• 配置之前我们先补充一下webpack的部分配置，用于方便我们的开发
• 在webpack.common.js中配置webpack的查找规则，也就是resolve，如下

...
module.exports = {
   
  entry: {
   
    ...
  },
  module: {
   
    ...
  },
  resolve: {
   
    extensions: ['.jsx', '.js', '.json'],
    alias: {
   
      "@": path.resolve(__dirname, 'src')
    }
  },
  plugins: [
    ...
  ],
  optimization: {
    // 公共代码抽离
    ...
  }
}

• 上面新增了一个resolve的解析规则，使webpack方便查找，第一个extensions中的配置表示我们在引入后缀为.jsx,.js,.json的文件时，可以直接写文件名而不用加后缀，比如引入’./index.jsx’，我们就可以直接写为’./index’
• 下面的alias就是别名配置，用于在引入路径时方便使用，比如我们在项目中有如下的代码结构

src 
├── lib 
│ └── utils.js 
└── pages 
└── demo 
└── index.js

• 在 src/pages/demo/index.js 中如果要引用 src/lib/utils.js 那么可以通过：import utils from ‘…/…/lib/utils’ ，如果目录更深一些，会越来越难看，这时可以通过设置 alias 来缩短这种写法，例如：

module.exports = {
   
  resolve: {
   
      '@': path.resolve(__dirname, 'src'),
      '@lib': path.resolve(__dirname, 'src/lib')
  }
}

• 这样我们就可以直接使用 '@lib/utils’来进行文件的引入了

react-router的使用

• 配置完resolve之后我们就开始进行react-router的配置了，还是先下载react-router-dom模块，命令为： npm i react-router-dom -S
• 然后在src下新建两个页面，pages/login.jsx与pages/home.jsx作为我们的路由页面

// pages/home.jsx
import React from 'react'
const Home = () => {
   
  return (
    <div>我是首页</div>
  )
}
export default Home

// pages/login.jsx
import React from 'react'
const Login = () => {
   
  return (
    <div>我是登录页</div>
  )
}
export default Login

• 接着在src下新建routes/index.jsx文件作为我们的路由管理页面
• 在文件内引入react与react-router-dom,然后引入新建的login页面与home页面
• 页面代码如下

// routes/index.jsx
import React from 'react'
import {
    HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Login from '@/pages/login'
import Home from '@/pages/home'
const RouteConfig = () =>