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 启动项目
相关推荐
望获linux1 小时前
【Linux基础知识系列】第一百一十篇 - 使用Nmap进行网络安全扫描
java·linux·开发语言·前端·数据库·信息可视化·php
乘乘凉1 小时前
Python中函数的闭包和装饰器
前端·数据库·python
Fantastic_sj2 小时前
部分CSS笔试题讲解
前端·css
雷达学弱狗4 小时前
链式法则解释上游梯度应用
开发语言·前端·javascript
爱隐身的官人5 小时前
爬虫基础学习-爬取网页项目(二)
前端·爬虫·python·学习
Jackson@ML6 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
烛阴8 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者9 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
vivi_and_qiao9 小时前
HTML的form表单
java·前端·html
骑驴看星星a10 小时前
Vue中的scoped属性
前端·javascript·vue.js