新版React Router v6.4中的App.js文件不必要

Question

我不明白新的react router v6.4 中的App.js文件的用途

在我的App.js文件中有了这个新代码，我的路线看起来像这个

App.js代码

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} />
);

然后在我的index.js文件中，它有这样的默认代码

index.js代码

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>
);

现在的问题是我的浏览器显示"；在"中找不到导出"default"(作为"App"导入(/App’(模块没有导出("；我不知道你会如何转换我的App.js代码，甚至导出默认的应用程序，因为我甚至从未使用过函数App{}方法

如果我只是简单地删除App.js文件并将所有代码复制到index.js文件中，那么一切都正常。

所以基本上，只需要一个带有以下代码的index.js文件就可以完全正常地工作

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} />
);

然而，一旦我尝试应用一个app.js文件并导入它，我就会遇到一个错误，因为它说没有导出，但我甚至不知道我会把它导出到哪里，因为我从未创建过应用程序功能

为什么CRA仍然包括app.js和index.js，因为新的React Router v6.4似乎不需要它？

Answer 1

为什么CRA在新的React Router v6.4似乎不需要它？

CRA创建一个同时使用index.js和基本App.js文件的默认应用程序，因为这是一个标准约定。然而，使用App.js从来都不是一个要求，当然，任何像react-router-dom这样的第三方库都不会有意见，也无法控制。

在第一个示例中，您没有创建和导出App组件，这就是尝试导入App失败的原因。事实上，App.js文件是通过以下内容直接呈现到DOM的：

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

如果愿意，您仍然可以声明和导出App组件。

示例：

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>
);