Question 214264 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Router not working when I deploy my app in a folder inside my domain

I created a react app, using viteJS. And I’m using the latest version of the react-router, I followed this tutorial. This app is working fine when I run local, but when deployed to the server I’m getting this error: Error: No route matches URL "/field-logger/"

field-logger is the folder in my domain where I’m hosting my app. I actually host many other apps that were created with create-react-app and using the previous version of the react-router and they are all working. My problem is with this one.

These are my routes, and the project is set just like the tutorial above.

const router = createBrowserRouter([
    {
        path: "/",
        element: <BaseLayout />,
        errorElement: <ErrorPage />,
        children: [
            {
                path: "/",
                element: <LogbooksPage />,
            },
            {
                path: "/logbook/:logbookId",
                element: <LogbookPage />,
            },
            {
                path: "settings",
                element: <SettingsPage />,
            },
            {
                path: "dx-cluster",
                element: <DXClusterPage />,
            }
        ]
    }
]);

What am I missing for this to work?

This is my build script (viteJS): tsc && vite build --base=/field-logger/. field-logger is the folder inside my ftp where I’m putting the app. The base option is described here. I also tried the homepage in the packages.json

The source is public and can be found here

Thanks for any help.

Tags:

2

Answers


  1. 0

    Inside your package.json

    Set the homepage entry with your prefix.

    Here is the doc

    Extract :

    By default, Create React App produces a build assuming your app is
    hosted at the server root.

    To override this, specify the homepage in your package.json, for
    example:

    "homepage": "http://mywebsite.com/relativepath",

    This will let Create React App correctly infer the root path to use in
    the generated HTML file.

    Login or Signup to reply.
  2. 0

    your source code doesn’t contain a /field-logger folder so if you pass the --base flag, all your static assets will have invalid src and link attributes. You can confirm this by checking some files in your /dist directory (the default directory which gets created when you build to obtain static assets).
    You can resort to previous syntax of react-router-dom package. You will have to refactor your code a little bit for that.

    Edit: The base flag ‘appends’ to your root. If your root folder name is already /field-logger then by passing --base=/field-logger/ you are saying that there is a /field-logger/field-logger folder and go check that out for my static assets.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search