vite 初始化react项目

一. 初始化

npm create vite@latest

• Project name 项目名，例如：todo-list

• Select a framework 选：React

• Select a variant 选：TypeScript

  npm install //安装依赖
  npm run dev //启动项目

这样一个简单的react项目就实现了。

二. 添加路由

npm install react-router-dom

1. 修改main.tsx文件，使用BrowserRouter包裹

   import React from 'react'
   import App from './App.tsx'
   import ReactDOM from 'react-dom/client'
   import { BrowserRouter } from 'react-router-dom'

   ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
   
   
   
   </React.StrictMode>
   )

2. 创建页面组件src/pages，创建页面。
   例：src/pages/Home.tsx

   export default function Home() {
   return (
   

   Home
   
   )
   }

3. 在App.tsx中引入页面，页面使用包裹，使用Link进行页面跳转

   import { Routes, Route, Link } from 'react-router-dom'
   import Home from './pages/Home'
   import About from './pages/About'

   function App() {
   return (
   

   
   

   
   🏠 Home
   

      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </div>

   )
   }

   export default App

   npm run dev 启动项目

三. 封装路由

为了更方便维护，可以直接将路由配置封装到专门的文件内。

创建路由组件src/router/index.tsx

index.tsx

import { createBrowserRouter } from 'react-router-dom'
import Home from '@/pages/Home'
import About from '@/pages/About'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
  ...
])

export default router

我删除了app.tsx文件，直接在main.tsx中创建App渲染。

import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "@/router";

const App = () => {
  return <RouterProvider router={router} />;
};

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

npm run dev 启动项目