当前位置：首页 > news >正文

vite 初始化react项目

news 来源：原创 2025/5/9 8:22:56

一. 初始化

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

修改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><BrowserRouter><App /></BrowserRouter></React.StrictMode>
)

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

export default function Home() {return (<div>Home</div>)
}

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

import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'function App() {return (<div className="p-4"><nav className="space-x-4"><Link to="/">🏠 Home</Link></nav><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 />);