My React app should have 2 main webpages: localhost:3001/
and localhost:3001/tags/
. The issue is that loading localhost:3001/tags/
will display the contents at localhost:3001/
. I can also tell that /tags/
isn’t loading properly because I set the page title for it to “Tags” but instead, “Homepage” shows as the page title.
The file structure:
.env
index.html
package.json
vite.config.ts
etc.
src/
| App.tsx
| main.tsx
| tags/
| index.html
| tags.tsx
The main index.html
has the script tag with src="/src/main.tsx"
. The src/tags/index.html
is the same as the main index.html
except with <title>Tags</title>
and script tag with src="./tags.tsx"
.
tags.tsx
has a simple “Hello world” inside the createRoot()
.
vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3001
},
build: {
outDir: 'dist',
emptyOutDir: true,
rollupOptions: {
input: {
main: 'index.html',
tags: 'src/tags/index.html'
}
}
}
})