react项目配置路径别名

L同学啦啦啦
692 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章WebSocket介绍中，我们学习了WebSocket的知识点，包括什么是WebSocket、socket.io 的使用等相关知识点。今天，在这篇文章中，我们将学习如何在react项目中配置路径别名、配置@别名路径提示、路由鉴权等相关知识点。

配置路径别名

在项目中，我们会配置@路径别名简化路径。需要注意的是，CRA 将所有工程化配置，都隐藏在了 react-scripts 包中，所以，项目中看不到任何配置信息。如果要修改 CRA 的默认配置，有以下几种方案：

  1. 【推荐】通过第三方库来修改，比如，@craco/craco
  2. 通过执行 yarn eject 命令，释放 react-scripts 中的所有配置到项目中（注意：该操作不可逆！！！）

配置@路径别名步骤：

  1. 安装修改 CRA 配置的包：yarn add -D @craco/craco
  2. 在项目根目录中创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名
  3. 修改 package.json 中的脚本命令
  4. 在代码中，就可以通过 @ 来表示 src 目录的绝对路径
  5. 重启项目，让配置生效

在/craco.config.js 文件中配置以下信息：

const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

在package.json 中将 start/build/test 三个命令修改为 craco 方式。

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

@别名路径提示

在 VSCode 中，jsconfig.json 文件中的有时候会有红色波浪线提示错误，直接忽略即可，不会影响路径提示。配置完路径别名后，需要让vscode识别@路径并给出路径提示。

让vscode识别@路径并给出路径提示实现步骤：

  1. 在项目根目录创建 jsconfig.json 配置文件
  2. 在配置文件中添加以下配置

在/jsconfig.json 文件中配置以下信息：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

配置完成之后，VSCode 会自动读取 jsconfig.json 中的配置，让 vscode 知道 @ 就是 src 目录。

路由鉴权

在项目中，我们访问需要登陆的页面，如果未登录时访问需要拦截并跳转到登录页面。这个需求的实现思路是自己封装 AuthRoute 路由鉴权组件，实现未登录拦截，并跳转到登录页面。

我们的思路是AuthRoute 组件的用法应该与 Route 组件完全一致，并且 AuthRoute 组件也能够实现路由配置功能。所以，我们要封装的 AuthRoute 组件就是对 Route 组件的封装，并同时实现了鉴权功能。另一个点是分别对登录或未登录，进行相应处理。

// Route 用法：
<Route path="/home" component={Home} />

// AuthRoute 用法：
<AuthRoute path="/home" component={Home} />

实现路由鉴权步骤：

  1. 在 components 目录中，创建 AuthRoute/index.js 文件
  2. 判断是否登录
  3. 登录时，直接渲染相应页面组件
  4. 未登录时，重定向到登录页面
  5. 将需要鉴权的页面路由配置，替换为 AuthRoute 组件

components/AuthRoute/index.js 中

import { Route, Redirect } from 'react-router-dom'
import { isAuth } from '@/utils'

const AuthRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props => {
        // 判断是否登录
        if (!isAuth()) {
          // 未登录
          return (
            <Redirect
              to={{
                pathname: '/login',
                state: { from: props.location.pathname }
              }}
            />
          )
        }

        // 登录
        return <Component />
      }}
    />
  )
}

export { AuthRoute }

App.js 中

import { AuthRoute } from '@/components/AuthRoute'

// 使用 AuthRoute 组件，替换 Route 组件
<AuthRoute path="/home" component={Layout}></AuthRoute>
avatar
文章
阅读
粉丝