如何在 esbuild 中使用 React Routes？

Question

I'm using esbuild to create React app, its working good, but, when I tried to enable react-router on the app, it can be builder and works, but I'm not able to move between routes, the initial config:

(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'
}) })();

And my routes are declare:

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

but the server gives me: Cannot GET /register

Answer 1

create new folder 'components' => create new file navigation

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