鏈接在帶有 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>