App.js file uncessary in New Version of React Router v6.4?-CodePudding

I don't understand the purpose of an App.js file in the new react router v6.4

With this new code in my App.js file my routes look like this

App.js code

const router = createBrowserRouter([
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Home />,
        errorElement: <ErrorPage />,
      },
      {
        path: "/products",
        element: <Products />,
        errorElement: <ErrorPage />,
      },
      {
        path: "/reports",
        element: <Reports />,
        errorElement: <ErrorPage />,
      },
    ],
  },
]);
                    createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

Then in my index.js file it has the default code like this

index.js code

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

The problem now is my browser says "export 'default' (imported as 'App') was not found in './App' (module has no exports)" and I don't know how you would convert my App.js code to even export default App since I never even used the function App() {} method

If I simply just delete the App.js file and copy all my code into my index.js file, then everything works like normal.

So basically just having one single index.js file with this code below works completely fine

const router = createBrowserRouter([
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Home />,
        errorElement: <ErrorPage />,
      },
      {
        path: "/products",
        element: <Products />,
        errorElement: <ErrorPage />,
      },
      {
        path: "/reports",
        element: <Reports />,
        errorElement: <ErrorPage />,
      },
    ],
  },
]);
                    createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

However, once I try to app an App.js file and import it, I get an error because it says no exports yet I don't see where I would even export it since I never created the App function

Why does CRA still include both the app.js and index.js since the new React Router v6.4 doesn't seem to need it?

CodePudding user response：

Why does CRA still include both the app.js and index.js since the new React Router v6.4 doesn't seem to need it?

CRA creates a default app that uses both index.js and base App.js files since this is a standard convention. Using an App.js was never a requirement though, and certainly nothing any 3rd-party library like react-router-dom would be opinionated about nor be able to control.

You are not creating and exporting an App component in the first example, this is why attempting to import App failed. In fact, the App.js file was directly rendering to the DOM with the following:

createRoot(document.getElementById("root"))
  .render(<RouterProvider router={router} />);

You can still declare and export an App component if you like.

Example:

App.js

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

const router = createBrowserRouter([
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Home />,
        errorElement: <ErrorPage />,
      },
      {
        path: "/products",
        element: <Products />,
        errorElement: <ErrorPage />,
      },
      {
        path: "/reports",
        element: <Reports />,
        errorElement: <ErrorPage />,
      },
    ],
  },
]);

const App = () => <RouterProvider router={router} />;

export default App;

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);