👀从零开始学React第二天~React配置ESlint代码格式化+路由导航的实现(react-router-dom)

oil欧哟
1,829 阅读5分钟

前言

今天是学习react的第二天啦，我的第一个小目标是将平时使用的todo清单软件通过react在web端一比一的实现所有功能！

日更1.png

如果想要看实现的效果可以通过 react-todo gitee仓库 拉取代码查看噢

前面写的文章都会放在前言中：

📦代码仓库链接 react-todo gitee仓库

💻在线预览效果 react-todo 开发进度

👀 # 从零开始学React第一天~React基础框架的构建(Create React App+Tailwind css+Material ui)

配置eslint

在今天的开发开始前，我想先配置一下eslint实现一个代码格式的检查，避免从一开始学习react我的某些开发习惯就有问题却不自知。

首先我是已经在全局安装过eslint的了，没安装的同学通过以下命令全局安装eslint

npm install eslint -g

然后我们在根目录下执行eslint的初始化命令

npx eslint --init

执行完成后，会出现一个引导，根据你自己开发的项目所需选择对应选项，我当前的项目是这样选择的

选择完成后会提示让你安装一些eslint拓展，选择yes就ok了。安装完成后我们的项目根目录下会出现eslint的配置文件 .eslintrc.js ,配置如下:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "commonjs":true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

这时我们的代码检查就配置好了，如果后期有什么不习惯的地方就可以单独在配置文件里新增其他配置~

当然代码检查配置好了还不够，我们要开发的爽当然要让编辑器自动进行代码格式化，我个人的话常用的是prettier ESLint 拓展，这个拓展的好处就是我们不需要单独为了代码格式化配置一个新文件，直接基于eslint的配置文件就可以实现代码格式。

安装这个拓展的前提是要根据自己开发的项目类型，在全局安装以下的包

安装完这个拓展后，在vscode代码内右键菜单里选择使用prettier eslint格式化代码。

实现导航路由跳转

今天的任务主要是将昨天写的导航栏与路由模块给结合起来，实现一个点击跳转的功能。

首先根据昨天写的左侧导航菜单的data数据中path所对应的页面给创建好，每一个目录里面都有一个

index.jsx 的入口文件

\

由于我们的项目只需要在导航栏的右侧区域进行路由组件切换，因此我们修改一下路由引入的位置

在src目录下新建routes文件夹并新建入口文件index.jsx，写入以下代码

import React from "react";
import { Route, Routes } from "react-router-dom";
import DayTodo from "../pages/dayTodo/index";

const routes = [
  {
    path: "dayTodo",
    component: DayTodo,
  },
];

const Router = () => (
  <Routes>
    {routes.map((item) => {
      return (
        <Route
          key={item.path}
          exact
          path={item.path}
          element={item.component()}
        ></Route>
      );
    })}
  </Routes>
);

export default Router;

我们先引入一个组件DayTodo，创建一个数组routes用于放置组件和对应的路由路径，然后创建一个Router方法返回遍历routes创建的路由标签。未来如果还需要添加其他页面就先引入组件然后在routes数组中添加就OK了。

然后我们需要在 layout/index.jsx 中引入一下我们的路由组件，并且为左侧导航菜单栏的列表项添加点击跳转的功能，代码如下：

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
import Router from '../routes';

import { List, ListItem, ListItemButton, ListItemIcon, Button, Card } from '@mui/material';
import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined';
import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
import CalendarViewMonthOutlinedIcon from '@mui/icons-material/CalendarViewMonthOutlined';
import InboxOutlinedIcon from '@mui/icons-material/InboxOutlined';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';

const LeftList = () => {
  const data = [
    { icon: <WbSunnyOutlinedIcon />, label: "Day Todo", path: "dayTodo" },
    { icon: <CalendarTodayOutlinedIcon />, label: "最近待办", path: "recentlyTodo" },
    { icon: <CalendarViewMonthOutlinedIcon />, label: "日期概览", path: "dateOverview" },
    { icon: <InboxOutlinedIcon />, label: "待办箱", path: "todyBox" },
    { icon: <SearchOutlinedIcon />, label: "搜索", path: "search" },
    { icon: <ListAltOutlinedIcon />, label: "数据复盘", path: "dataReview" },
  ]
  const [active, setActive] = useState("dayTodo");

  return (<List>
    {data.map(item => {
      return (
        <Link to={item.path} key={item.path}>
          <ListItem
            disablePadding
            className={item.path === active ? 'bg-gray-200' : ''}
            onClick={() => setActive(item.path)}>
            <ListItemButton>
              <ListItemIcon>
                {item.icon}
              </ListItemIcon>
              <span className="text-sm" >
                {item.label}
              </span>
            </ListItemButton>
          </ListItem>
        </Link>)
    })}
  </List>)

}

export default function Layout() {
  return (<div className='w-screen h-screen flex items-center justify-center'>
    <Card variant="outlined" className='w-2/3 h-3/4 shadow-lg bg-white flex'>
      <div className='w-1/5 bg-gray-50'>
        <div className=' flex items-center justify-center p-5'>
          <Button variant="contained">这是一个按钮</Button>
        </div>
        <LeftList />
      </div>
      <div className=" w-4/5">
        <Router></Router>
      </div>
    </Card>
  </div>)
}

上面的代码重点在于我为 ListItem 标签外面套了一个 Link 标签，通过传入to属性就可以实现点击跳转到指定页面，同时将 Router 组件引入并放在页面中，这样路由切换的时候就会展示出响应的组件了~

这里还要说一下，我将 BrowserRouter 放在了index.js中引入，放在最外层更加方便一点。

// index.js
ReactDOM.render(
    <BrowserRouter>
        <React.StrictMode>
            <App />
        </React.StrictMode>
    </BrowserRouter>
    ,
    document.getElementById("root")
)

接下来我们看一下页面的效果：

我将昨天写的官网示例代码放在了 dayTodo页面中，当我的路由在 /dayTodo 的时候右侧就渲染了指定的组件，并且点击左侧的导航菜单路由会进行一个切换，说明我的路由跳转功能已经完成啦~!

总结

今天通过配置路由感受了一下 react-router-dom 和 vue-router 的不同之处。

vue-router ：在网上搜索使用方法你可以看到大部分开发者都是使用一个统一的配置方式。

react-router-dom ： 在使用的时候我就已经想到了很多种可行的配置方式了，网上大家的配置方式也是各有各的风格，突出的是一个灵活吧（或许是我还没摸索到最佳实践）

这也就难怪vue相对react来说上手简单一些，毕竟使用的方式就已经限制了你注定不可能差到哪去，但是react的话我已经脑补出各个开发者大相径庭的开发风格了。不过如果摸索出自己的一个规范应该也是一件很爽的事情吧~

avatar
文章
阅读
粉丝