链接在带有 React Router 的 Modal/Component 中无法正常工作

Question

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

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

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

<Modal />

带有链接的组件：

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

模式在 HashRouter 之外，因为我可以从我想要的任何页面访问。 因此，此模式位于主页中。 有没有办法让链接像导航栏一样打开新页面？

Answer 1

如果您只是将Modal组件放在HashRouter内部， HashRouter ，以便 modal 内部的Link组件将从HashRouter提供的上下文中获取正确的历史对象。

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