微前端应用程序中的 useNavigate() 问题

Question

我正在设计一个名为 header 的 MFE 应用程序。实现如下所示，

header.js

const headerApp = () => {
  const navigate = useNavigate();

  const logoClickHandler = () => {
       navigate('/some-route'); // router v6
  }

  return(
      ...
      <Logo onClick={logoClickHandler} />
  )
}

App.js

我想keep/use像下面这样

  const App = () = {
      return(
         <div>
             <HeaderApp /> // This component just uses useNavigation or <NavLink to='/some-route' />
         </div
      )
  }

问题是 Header 应用中没有自己的路由机制。它只是一个单独的应用程序，更具体地说是独立组件，只是使用 useNavigate() 或 <NavLink /> 路由器功能在不同的 MFE 应用程序之间提供导航。

因为我正在使用 useNaviage() 或 <NavLink />，react 要求我将组件包装在 <Routes> 中（如下所示），这对我的 [=51 来说是不必要的=]应用

反应错误

useNavigate() may be used only in the context of a <Router> component.

不想像下面这样结束，

 const App = () = {
      return(
         <div>
            <Routes>
               <Route path='/' element={ <HeaderApp /> } />      
            </Routes>       
         </div
      )
  }

注意：路由在称为容器的单独应用程序中处理。 Header 仅提供导航链接。

Answer 1

React Router 使用 React Context，这是一种通过 React 树向下传递信息的方式。因此，您只需要确保至少有 one <Router> 作为渲染 <headerApp /> 的任何组件的 parent工作。

如果您不能接受 - 例如，您希望您的应用程序在 non-React 路由器上下文中使用 - 您可能需要重构您的 header 应用程序，以便它提供其拥有 React Router 实例或通过 props 接受所需的方法和属性。

如果没有 <headerApp /> 的 parent 之一，则无法使用 <NavLink /> 或 useNavigate() 使用 Router />。

微前端应用程序中的 useNavigate() 问题

useNavigate() issue in micro frontend app

reactjs

react-router

react-router-dom