route specific components are not rendering in a react app

[arunkumar413]

For react apps the route specific components are not rendering. Seems like as the URL changes in the URL bar, the nutria system is trying to render a HTML file instead of react component. I tried the below react rotuer config but the component doesn't render.

export const AppRouter = createBrowserRouter(
  [
    {
      path: "dist/index",
      element: <Home />,
    },
    {
      path: "dist/about",
      element: <About />,
    },
    {
      path: "dist/contact",
      element: <Contact />,
    },
  ]

);

[fabricedesre]

Nutria's http server is a static server, it doesn´t do any transformation on the content. So your react build system is responsible to produce the html content.

[arunkumar413]

@fabricedesre I think it's the server that is trying to send a text/html mime type for the route instead a react component.

[fabricedesre]

What is the content of the file? What is being displayed?

[arunkumar413]

The route specific react components are of JSX

[fabricedesre]

is your app loading properly if you use another static http server and a web browser? (eg. python -m http.server). At least the initial page needs to be proper html/js to load whatever react needs to deal with jsx if it's not turned into regular html/js at build time.

[arunkumar413]

@fabricedesre the HTML file and bundle JS script file are loading fine. It's just the route specific components that are not rendering. I just raised the issue ( remix-run/react-router#11333 ) with the. react router team as well. Let's wait for their thoughts as well.

[arunkumar413]

@fabricedesre I was suggested to use the right combination of start_url in webmanifest and basename property ( https://reactrouter.com/en/main/routers/create-browser-router#basename ) in react couter