如何在 esbuild 中使用 React Routes？答案

【问题标题】：How to use React Routes with esbuild?如何在 esbuild 中使用 React Routes？
【发布时间】：2022-07-16 06:36:43
【问题描述】：

我正在使用 esbuild 创建 React 应用程序，它运行良好，但是，当我尝试在应用程序上启用 react-router 时，它可以是构建器并且可以工作，但我无法在路由之间移动，初始配置：

(async () => {
const builder = await build({
    bundle: true,
    define: {"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || 'dev')},
    entryPoints: ["app/index.tsx"],
    incremental: true,
    minify: process.env.NODE_ENV === 'prod',
    
    outfile: './app/public/main.js',
    loader: {
        '.svg': 'dataurl',
        '.png': 'dataurl'
    },
    
});

chokidar.watch("app/src/**/*.{ts,tsx}", {
    interval: 0
}).on("all", () => {
    builder.rebuild()
});

liveServer.start({
    open: true,
    port: process.env.PORT || 8080,
    root: './app/public'
}) })();

我的路线已声明：

<Routes>
    <Route path={'/'} element={<Login />} />
    <Route path={'register'} element={<Register />} />
</Routes>

但是服务器给了我：Cannot GET /register

【问题讨论】：

标签： javascript reactjs npm-live-server esbuild

【解决方案1】：

创建新文件夹 'components' => 创建新文件导航

import React from 'react'
import { Link } from 'react-router-dom'
const Navigation = () => {
    return (
        <>
            <nav className='flex justify-between items-center h-[50px] px-5 shadow-md bg-gray-500 text-white'>
                <h3>Git search</h3>

                <span>
                    <Link to='/' className='mr-2'>Home</Link>
                    <Link to='/favourites'>Favourites</Link>
                </span>
            </nav>
        </>
    )
}
export default Navigation

【讨论】：