Javascript 使用createBrowserRoutVS BrowserRouter的Reaction路由

此外，文件中还有一条注解说

由于在设计中提取和呈现的解耦 数据API，您应该在Reaction树之外创建路由 具有静态定义的一组路由.有关这方面的更多信息 设计，请参阅重新混合react 路由的博客文章和何时 找人谈一谈.

我不太确定他们所说的React树外是什么意思 我的项目中的所有内容都在React树中.

这基本上意味着建议创建路由100的任何react 组件，以便它是稳定的引用.

示例:

const router = createBrowserRouter([
  ...routes...
]);

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

在您的实现中，router被创建102,Router组件.

function Router({ currentUser }: Props) {
  const userInfo = { name: currentUser.name }

  const router = createBrowserRouter([
    {
      path: '/:appTypeId?',
      element: <AppLayout currentUser={userInfo} />,
      loader: defaulNewAPIs,
      children: [
        {
          index: true,
          element: <ReferralDetails status="new" />,
        },
      ],
    },
  ]);

  return <RouterProvider router={router} />;
}

Router由App渲染.

function App({ msalContext }: AppProps) {
  return (
    <>
      <AuthenticatedTemplate>
        <Router currentUser={msalContext.accounts[0]} />
      </AuthenticatedTemplate>
    </>
  );
}

任何时候，当react 树中高于Router的组件(例如AuthenticatedTemplate或App)被重新呈现时，它们的整个子react 树被重新呈现.这在Router中意味着router将被重新声明和新的引用，并且这将105重新挂载可以呈现的任何被布线的组件.

由于您的路由似乎对currentUser prop有依赖性，因此这里的解决方案可能是记住router值.

function Router({ currentUser }: Props) {
  const router = React.useMemo(() => {
    return createBrowserRouter([
      {
        path: '/:appTypeId?',
        element: <AppLayout currentUser={{ name: currentUser.name }} />,
        loader: defaulNewAPIs,
        children: [
          {
            index: true,
            element: <ReferralDetails status="new" />,
          },
        ],
      },
    ]);
  }, [currentUser]);

  return <RouterProvider router={router} />;
}

然而，一个更好的解决方案是通过Reaction上下文向您的应用程序提供currentUser或整个msalContext值，并将IF与您的路由逻辑分离.

示例:

const MsalContext = React.createContext( .... );

const useMsalContext = () => React.useContext();

const MsalContextProvider = ({ children, msalContext }) => {
  return (
    <MsalContext.Provider value={msalContext}>
      {children}
    </MsalContext.Provider>
  );
};

function App({ msalContext }: AppProps) {
  return (
    <MsalContextProvider msalContext={msalContext}>
      <AuthenticatedTemplate>
        <Router />
      </AuthenticatedTemplate>
    </MsalContextProvider>
  )
}

const router = createBrowserRouter([
  {
    path: '/:appTypeId?',
    element: <AppLayout />,
    loader: defaulNewAPIs,
    children: [
      {
        index: true,
        element: <ReferralDetails status="new" />,
      },
    ],
  },
]);

function Router() {
  return <RouterProvider router={router} />;
}

const AppLayout = () => {
  const {
    accounts: [
      { name } // msalContext.accounts[0].name -> name
    ]
  } = useMsalContext();

  ...
};