如何使用自定义根 URL 托管 React 应用程序？

Question

我的 React 应用程序的根 url 是

/movies

，而不是

/

。还有详细页面，例如：

/movies/:id

。我想托管我的应用程序。但无论我尝试什么，它都以

/

根 url 开头。我看到了一张空白页。当我在网址中输入

/movies

时，我也会收到 404。

• 我尝试使用 netlify 进行托管，但没有成功。 （我只是拖拽构建文件）
• 我尝试使用 gh-pages 包托管 github 页面，但结果是相同的。

这是我的

index.tsx

。我该如何解决这个问题？

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>

Answer 1

你可以试试这个方法

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