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>
2
Answers
you can try this way
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.