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 (
    <div>Home</div>
  )
}

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 (
    <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 />);

npm run dev 启动项目