React18+TypeScript搭建通用中后台项目实战01 项目环境搭建

01 React18+TS通用中后台项目实战

项目搭建

npm create vite@latest

整合React-Router

安装

yarn add react-router-dom

路由基本结构

src/router/index.tsx

import {createHashRouter} from "react-router-dom";

const routers = [

]

export default createHashRouter(routers)

根组件基本结构

src/App.tsx

import {RouterProvider} from "react-router-dom";
import router from "./router";

function App() {
    return <RouterProvider router={router}/>
}

export default App

入口文件基本结构

src/main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

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

第一个页面

修改 src/router/index.tsx

import {createHashRouter} from "react-router-dom";

const routers = [
    {
        path:"/",
        element: <div>你好，React18+TypeScript</div>
    }
]

export default createHashRouter(routers)

配置404错误页面

修改 src/router/index.tsx

import {createHashRouter, Navigate} from "react-router-dom";

const routers = [
    {
        path: "/",
        element: <div>你好，React18+TypeScript</div>
    },
    {
        path: "*",
        element: <Navigate to="/404"/>
    },
    {
        path: "/404",
        element: <div>404</div>
    }
]

export default createHashRouter(routers)

此时，访问：http://localhost:5173/#/404 或者 http://localhost:5173/#/abc 等任意不存在页面，会自动重定向到404路由指定的页面。

配置403错误页面

修改 src/router/index.tsx

import {createBrowserRouter, Navigate} from "react-router-dom";

const routers = [
    {
        path: "/",
        element: <div>你好，React18+TypeScript</div>
    },
    {
        path: "*",
        element: <Navigate to="/404"/>
    },
    {
        path: "/404",
        element: <div>404</div>
    },
    {
        path: "/403",
        element: <div>403</div>
    }
]

export default createBrowserRouter(routers)

注意，这里将hash路由变成了浏览器路由，此时访问：http://localhost:5173/403

抽离基础页面

src/page/Index.tsx

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

src/page/Login.tsx

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

src/page/Error404.tsx

export default function Error404(){
    return (
        <div>Error 404</div>
    )
}

src/page/Error403.tsx

export default function Error403(){
    return (
        <div>Error 403</div>
    )
}

src/router/index.tsx

import {createBrowserRouter, Navigate} from "react-router-dom";
import Index from "../page/Index.tsx";
import Login from "../page/Login.tsx";
import Error404 from "../page/Error404.tsx";
import Error403 from "../page/Error403.tsx";

const routers = [
    {
        path: "/",
        element: <Index/>
    },
    {
        path: "/login",
        element: <Login/>
    },
    {
        path: "/404",
        element: <Error404/>
    },
    {
        path: "/403",
        element: <Error403/>
    },
    {
        path: "*",
        element: <Navigate to="/404"/>
    },
]

export default createBrowserRouter(routers)

测试

此时，分别访问如下页面：

• http://localhost:5173/
• http://localhost:5173/login
• http://localhost:5173/404
• http://localhost:5173/403
• http://localhost:5173/other