从零开始构建React应用程序：路由和权限搭建

2024-01-01 01:54:21

1. 前言

在现代前端开发中，构建单页面应用程序（SPA）已成为主流趋势。而Vite、React、TypeScript、React Hook和MobX等技术栈，更是深受广大开发者的喜爱。本系列文章将带领您从零开始，一步步构建一个基于这些技术栈的React应用程序。

2. 环境搭建

首先，我们需要搭建开发环境。您可以使用以下命令来安装必要的工具和依赖项：

npm install -g vite
npm install create-react-app

然后，创建一个新的React项目：

create-react-app my-app
cd my-app

3. 集成Vite

接下来，我们需要集成Vite作为我们的构建工具。在项目根目录下，运行以下命令：

npm install --save-dev vite

然后，在package.json文件中添加以下脚本：

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

4. 添加TypeScript支持

为了使用TypeScript，我们需要安装相应的依赖项：

npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

然后，在tsconfig.json文件中添加以下配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

5. 添加React Hook和MobX支持

为了使用React Hook和MobX，我们需要安装相应的依赖项：

npm install --save-dev react-router-dom @mobx/react @mobx/core

然后，在index.js文件中添加以下代码：

import React from "react";
import ReactDOM from "react-dom";
import { MobXProvider } from "@mobx/react";
import store from "./store";
import App from "./App";

ReactDOM.render(
  <MobXProvider store={store}>
    <App />
  </MobXProvider>,
  document.getElementById("root")
);

6. 搭建路由

为了实现页面导航，我们需要搭建路由系统。在src文件夹下，创建一个名为router.js的文件，并添加以下代码：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

const AppRouter = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

export default AppRouter;

在App.js文件中，将原有的代码替换为以下内容：

import { AppRouter } from "./router";

const App = () => {
  return (
    <div>
      <AppRouter />
    </div>
  );
};

export default App;

7. 搭建权限控制

为了实现权限控制，我们需要创建一个权限管理类。在src文件夹下，创建一个名为auth.js的文件，并添加以下代码：

class Auth {
  constructor() {
    this.loggedIn = false;
  }

  login() {
    this.loggedIn = true;
  }

  logout() {
    this.loggedIn = false;
  }

  isAuthenticated() {
    return this.loggedIn;
  }
}

export default new Auth();

在AppRouter.js文件中，将原有的代码替换为以下内容：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Auth from "./auth";

const AppRouter = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<PrivateRoute component={About} />} />
      </Routes>
    </BrowserRouter>
  );
};

const PrivateRoute = ({ component: Component }) => {
  return Auth.isAuthenticated() ? <Component /> : <Redirect to="/" />;
};

export default AppRouter;