CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Guilherme Nunes
Guilherme Nunes

Reputation: 175

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

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?

Upvotes: 1

Views: 1382

Answers (1)

Tholle
Tholle

Reputation: 112787

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>

Upvotes: 1

Related Questions