Webstie running Vite & react-route-dom doesn't load assets from the correct URL

Question

I have a vite app running with react-router-dom. I have this issue that if I navitgate to a page it all loads fine however if I copy and paste the url into another window it fails to load some assets.

Example below:

I have a site at mysite.blah I can navigate to a page say mysite.blah/page1, all is good. However if I paste that into a new browser window I get and issue where it fails to load one of my assets. It is trying to load the asset from mysite.blah/page1/assets/index-eufduf.js when the location is mysite.blah/assets/index-eufduf.js.

[email protected] [email protected]

I have tried setting the base in vite.config.ts to "/" but that didn't change anything. I also tried using BrowserRouter instead of Router but to no avail.

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import eslint from 'vite-plugin-eslint';
import EnvironmentPlugin from 'vite-plugin-environment';
import path from 'path';

export default defineConfig({
  // depending on your application, base can also be "/"
  base: '',
  plugins: [react(), viteTsconfigPaths(), eslint(), EnvironmentPlugin('all')],
  server: {
    // this ensures that the browser opens upon server start
    open: true,
    // this sets a default port to 3000
    port: 3000,
  },
  build: {
    target: 'esnext', //browsers can handle the latest ES features
  }
});

Answer 1

I figure it out. It was indeed a mistake in my code. I had a link as BASE_URL/page2/ when it should have been BASE_URL/page2. i.e. the trailing / should not have been there.