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

Reactjs – How to host react app with a custom root url?

The root url of my React application is /movies, not /. And there are detail pages like: /movies/:id. I want to host my app. But no matter what I try, it starts with / root url. And I’m presented with a blank page. I also get 404 when I type /movies in the url.

  • I tried hosting with netlify, but it didn’t work. (I just dragged the build file)
  • I tried hosting with github pages using the gh-pages package, but the result was the same.

This is my index.tsx. How can i solve this?

const router = createBrowserRouter(
  [
    {
      path: '/',
      children: [
        {
          path: '/movies',
          element: <MoviesList />,
        },
        {
          path: '/movies/:id',
          element: <MovieDetail />,
        },
      ],
    },
  ],
  { basename: '/movies' }
);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
Tags:

2

Answers


  1. 0

    you can try this way

    const router = createBrowserRouter(
  [
        {
          path: '/movies',
          element: <MoviesList />,
        },
        {
          path: '/movies/:id',
          element: <MovieDetail />,
        }
  ]
);
    Login or Signup to reply.
  2. 0

    I’m also faced the blank page problem when i want custom URL to be base. Then resolved by using simple Navigate component and removed the children in root / like this.

    import { Navigate, createBrowserRouter} from 'react-router-dom';

const router = createBrowserRouter(
    [
      {
        path: '/',
        Component : ()=> <Navigate to={'/'}/>
      },
      {
        path: 'movies',
        element: <MoviesList />,
        children: [
            {
              path: 'movies/:id',
              element: <MovieDetail />,
            }
        ]
      }
    ]
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search