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>
    <BrowserRouter>
    <App />
    </BrowserRouter>
    </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 (


    复制代码
       <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 启动项目
相关推荐
一只韩非子33 分钟前
AI时代,程序员如何优雅地搞定页面设计?
前端·ai编程
新中地GIS开发老师39 分钟前
2025Mapbox零基础入门教程(14)定位功能
前端·javascript·arcgis·gis·mapbox·gis开发·地理信息科学
tager42 分钟前
Vue 3 组件开发中的"双脚本"困境
前端·vue.js·代码规范
烛阴1 小时前
Int / Floor
前端·webgl
excel1 小时前
使用 PWA 时,为什么你必须手动添加更新逻辑,否则会报错?
前端
Moment1 小时前
Node.js 这么多后端框架,我到底该用哪个?🫠🫠🫠
前端·后端·node.js
尚学教辅学习资料2 小时前
SpringBoot3.x入门到精通系列: 2.3 Web开发基础
前端·springboot·web开发
han_2 小时前
前端遇到页面卡顿问题,如何排查和解决?
前端·javascript·性能优化
拾光拾趣录3 小时前
H5适配9大高频题连环炸!第3问90%人翻车?
前端·面试
拾光拾趣录3 小时前
给Electron-Claude应用构建全面的数据统计体系 - 从0到1的实践总结
前端·electron