Link 在带有 React Router 的模态/组件中无法正常工作

Question

当我在 bootstrap 模式中添加 link 时，新页面会打开，但它不会在导航栏下方或页脚上方打开，并且显示为黑色透明背景（继承自模态组件）。

Ps: 导航栏完美打开页面。

<HashRouter>
<Navbar />
       <Route exact path="/" component={Option}/>
       <Route path="/finalizar3" render={ (props) => <Checkout1 shoppingCart={this.state.shoppingCart} } />
</HashRouter>

<Modal />

具有 link 的组件：

<Link className="btn btn-primary" type="button" strict to="/finalizar1">Finalizar Compra</Link>

模态框在 HashRouter 之外，因为我可以从我想要的任何页面访问。因此，此模式位于主页中。是否有解决方法可以使 link 像导航栏一样打开新页面？

Answer 1

如果你只是将 Modal 组件放在 HashRouter 中，它就会起作用，这样模态中的 Link 组件将从 HashRouter 提供的上下文中获取正确的历史对象].

<HashRouter>
  <Navbar />
  <Route exact path="/" component={Option} />
  <Route
    path="/finalizar3"
    render={props => <Checkout1 shoppingCart={this.state.shoppingCart} />}
  />
  <Modal />
</HashRouter>

Link 在带有 React Router 的模态/组件中无法正常工作

Link doesn't work properly inside Modal / Component with React Router

reactjs

react-router

react-router-dom