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

Question

When I add a link inside of a bootstrap modal, the new page opens, but it doesnt open under the navbar, or above the footer, and it appears with a black transparent background (inherited from the modal component).

Ps: Navbar open pages perfectly.

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

<Modal />

The component with the link:

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

The modal is outside of HashRouter because I can access from any page I'd like. Therefore this modal is in the main page. Is there a workaround to make the link open the new page just like the navbar does?

Answer 1

It will work if you just put the Modal component inside of HashRouter , so that the Link component inside the modal will get the right history object from the context provided by the HashRouter .

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