React Router V6 IIS部署刷新不起作用答案

【问题标题】：React Router V6 IIS deployment Refresh not workReact Router V6 IIS部署刷新不起作用
【发布时间】：2022-06-26 16:35:00
【问题描述】：

我在我的 React 应用程序中使用 react-router v6。但是我发现当我刷新部署应用程序（使用 IIS）时，可以加载一些路径。

有谁知道我该如何解决这个问题？

路由的react方法。

Routes.js

const routes = (isLoggedIn) => [
  {
    path: '*',
    element: <EmptyLayout />,
    children: [
      { path: '*', element: <NotFound /> }
    ]
  },
  {
    path: '/',
    element: <EmptyLayout />,
    children: [
      { path: '/', element: <Navigate to={'/register'} /> },
      { path: '/register', element: <UserRegister /> }
    ]
  },
  {
    path: '/auth',
    element: isLoggedIn ? <Navigate to='/dashboard' /> : <EmptyLayout />,
    children: [
      { path: '/auth/active/:code', element: <AccountActive /> },
      { path: '/auth/login', element: <Login /> },
      { path: '', element: <Navigate to="/auth/login" /> },
    ],
  },
  {
    path: '/dashboard',
    element: isLoggedIn ? <MainLayout /> : <Navigate to="/auth/login" />,
    children: [
      { path: '/dashboard/applications', element: <Applications /> },
      { path: '/dashboard/application/:id/edit', element: <ApplicationEdit /> },
      { path: '/dashboard/application/:id/view', element: <ApplicationView /> },
      { path: '/dashboard/users', element: <Users /> },
      { path: '/dashboard/user/:id', element: <UserDetail /> },
      { path: '/dashboard/shippers', element: <Shippers /> },
      { path: '/dashboard/shipper/:id', element: <ShipperDetail /> },
      { path: '/dashboard/staffs', element: <Staffs /> },
      { path: '/dashboard/groups', element: <Groups /> },
      { path: '/dashboard/group/:groupId/edit', element: <GroupEdit /> },
      { path: '/dashboard', element: <Navigate to="/dashboard/applications" /> },
      { path: '*', element: <NotFound /> }
    ],
  },
];

当我在/dashboard 刷新时，它工作正常，但如果我在/dashboard/applications 刷新，则页面将不会加载。直接输入网址也是一样。

App.js

我在 App.js 中使用路由

const { login } = authState;

  const routing = useRoutes(routes(login));

  return (
    <div className="app">
      <ContextAProvider>
        <ContextBProvider>
          {routing}
        </ContextBProvider>
      </ContextAProvider>
    </div>
  );

index.js

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter >
      <ContextCProvider>
        <App />
      </ContextCProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

【问题讨论】：

查看create-react-app.dev/docs/deployment 并搜索专门处理将页面请求重定向到根 index.html 文件的问题，以便应用程序的部署目录可以处理呈现应用程序并让路由器处理导航到正确的 React 页面.

标签： reactjs react-router

【解决方案1】：

在docs of React Router 6 之后，您不需要使用链接的父部分，所以不要使用

  {
    path: '/auth',
    element: isLoggedIn ? <Navigate to='/dashboard' /> : <EmptyLayout />,
    children: [
      { path: '/auth/active/:code', element: <AccountActive /> },
      { path: '/auth/login', element: <Login /> },
      { path: '', element: <Navigate to="/auth/login" /> },
    ],
  },

你必须使用

  {
    path: '/auth',
    element: isLoggedIn ? <Navigate to='/dashboard' /> : <EmptyLayout />,
    children: [
      { path: 'active/:code', element: <AccountActive /> },
      { path: 'login', element: <Login /> },
      { path: '', element: <Navigate to="/auth/login" /> },
    ],
  },

【讨论】：