从零搭建一个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作为我们的路由页面
import React from 'react'
const Home = () => {
return (
<div>我是首页</div>
)
}
export default Home
import React from 'react'
const Login = () => {
return (
<div>我是登录页</div>
)
}
export default Login
- 接着在src下新建routes/index.jsx文件作为我们的路由管理页面
- 在文件内引入react与react-router-dom,然后引入新建的login页面与home页面
- 页面代码如下
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 = () =>