Vite创建React & TypeScript & antd项目并配置路由

小半 • 2024年3月2日下午5:58 • 前端开发 • 阅读 291

使用 Vite 创建 React 项目

在要创建项目的目录中运行以下命令。

yarn create vite

输入并选择项目设置。

Vite创建React & TypeScript & antd项目并配置路由 — image.png

创建项目后,安装项目依赖

yarn install

启动项目

yarn dev

安装antd

yarn add antd

修改 src/App.tsx，引入 antd 的按钮组件。

import React from 'react';
import { Button } from 'antd';
function App() {
  return (
    <>
        <Button type="primary">Button</Button>
    </>
  )
}

export default App

安装react-router-dom

yarn add react-router-dom

配置main.tsx

将<React.StrictMode>换成BrowserRouter

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

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  // <React.StrictMode>
    <BrowserRouter>
        <App />
    </BrowserRouter>
  // </React.StrictMode>,
)

创建页面

在src目录下面创建一个pages或者components目录，然后几个.tsx文件。

components/Navbar.tsx

//Navbar.tsx
import React from "react";
import {Link} from "react-router-dom";

function Navbar() {
    return (
        <div>
            <Link to="/">Home </Link>
            <Link to="/login">Login </Link>
        </div>
    )
}

export default Navbar

pages/Home.tsx

import React from 'react'

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

export default Home

pages/Login.tsx

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

App.tsx

在App.tsx中导入

import './App.css'
import {Route, Routes} from "react-router-dom";
import Home from "./pages/Home.tsx"
import Login from "./pages/Login.tsx"
import Navbar from "./components/Navbar.tsx";
function App() {
  return (
    <>
        <Navbar />
        <Routes>
            <Route path="/" element={<Home />}>Home</Route>
            <Route path="/login" element={<Login />}>Login</Route>
        </Routes>
    </>
  )
}

export default App