React Router使用React Context，这是一种通过React树向下传递信息的方式。因此，您只需要确保至少有一个
我正在设计一个名为header的MFE应用程序。实现如下，
header.js
const headerApp = () => {
const navigate = useNavigate();
const logoClickHandler = () => {
navigate('/some-route'); // router v6
}
return(
...
<Logo onClick={logoClickHandler} />
)
}
App.js
我想像下面这样保留/使用它
const App = () = {
return(
<div>
<HeaderApp /> // This component just uses useNavigation or <NavLink to='/some-route' />
</div
)
}
问题是Header应用程序中没有自己的路由机制。它只是一个单独的应用程序，是一个更具体的独立组件，只是使用useNavigate()或<NavLink />路由器功能在不同的MFE应用程序之间提供导航。
由于我使用的是useNaviage()或<NavLink />，react要求我将组件封装在<Routes>中(如下所示(，这对我的头部应用程序来说是不必要的。
反应错误
useNavigate((只能在
<Router>组件的上下文中使用。
不想像下面这样结束，
const App = () = {
return(
<div>
<Routes>
<Route path='/' element={ <HeaderApp /> } />
</Routes>
</div
)
}
注意：路由在称为容器的单独应用程序中处理。页眉仅提供导航链接。
<Router>作为正在渲染<headerApp />的任何组件的父级，即可使其工作。
如果你不接受这一点——例如，你希望你的应用程序在非React路由器上下文中使用——你可能需要重构你的头应用程序，使其提供自己的React路由器实例，或者通过props接受所需的方法和属性。
如果没有<headerApp />的父母之一使用Router />，则不可能使用<NavLink />或useNavigate()。