[英]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. Ps:导航栏完美打开页面。
<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.模式在 HashRouter 之外,因为我可以从我想要的任何页面访问。 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?
有没有办法让链接像导航栏一样打开新页面?
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
.如果您只是将
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.