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?
reactjs react-router react-router-dom
asked Nov 12 at 18:50
Guilherme Nunes
7210
add a comment |
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?
reactjs react-router react-router-dom
asked Nov 12 at 18:50
Guilherme Nunes
7210
It should work if you just putLinkinside ofHashRouter, so thatLinkwill get the right history object from the context provided by the router. Doesn't it work for you to just put it there instead?
– Tholle
Nov 12 at 18:53
1
I actually addedHashRouter, and it works! Now the modal still keeps on the top of the page. Well, that's already a half way done. I'm still learning router however, this solves the issue. Thank you.
– Guilherme Nunes
Nov 12 at 19:00
add a comment |
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?
reactjs react-router react-router-dom
asked Nov 12 at 18:50
Guilherme Nunes
7210
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?
reactjs react-router react-router-dom
reactjs react-router react-router-dom
asked Nov 12 at 18:50
Guilherme Nunes
7210
asked Nov 12 at 18:50
Guilherme Nunes
7210
asked Nov 12 at 18:50
Guilherme Nunes
7210
asked Nov 12 at 18:50
Guilherme Nunes
7210
asked Nov 12 at 18:50
Guilherme Nunes
7210
7210
It should work if you just putLinkinside ofHashRouter, so thatLinkwill get the right history object from the context provided by the router. Doesn't it work for you to just put it there instead?
– Tholle
Nov 12 at 18:53
1
I actually addedHashRouter, and it works! Now the modal still keeps on the top of the page. Well, that's already a half way done. I'm still learning router however, this solves the issue. Thank you.
– Guilherme Nunes
Nov 12 at 19:00
add a comment |
It should work if you just putLinkinside ofHashRouter, so thatLinkwill get the right history object from the context provided by the router. Doesn't it work for you to just put it there instead?
– Tholle
Nov 12 at 18:53
1
I actually addedHashRouter, and it works! Now the modal still keeps on the top of the page. Well, that's already a half way done. I'm still learning router however, this solves the issue. Thank you.
– Guilherme Nunes
Nov 12 at 19:00
It should work if you just put
Link inside of HashRouter, so that Link will get the right history object from the context provided by the router. Doesn't it work for you to just put it there instead?– Tholle
Nov 12 at 18:53
It should work if you just put
Link inside of HashRouter, so that Link will get the right history object from the context provided by the router. Doesn't it work for you to just put it there instead?– Tholle
Nov 12 at 18:53
1
1
I actually added
HashRouter, and it works! Now the modal still keeps on the top of the page. Well, that's already a half way done. I'm still learning router however, this solves the issue. Thank you.– Guilherme Nunes
Nov 12 at 19:00
I actually added
HashRouter, and it works! Now the modal still keeps on the top of the page. Well, that's already a half way done. I'm still learning router however, this solves the issue. Thank you.– Guilherme Nunes
Nov 12 at 19:00
add a comment |
1 Answer
1
active
oldest
votes
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>
answered Nov 12 at 19:04
Tholle
33.7k53760
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268348%2flink-doesnt-work-properly-inside-modal-component-with-react-router%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>
answered Nov 12 at 19:04
Tholle
33.7k53760
add a comment |
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>
answered Nov 12 at 19:04
Tholle
33.7k53760
add a comment |
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>
answered Nov 12 at 19:04
Tholle
33.7k53760
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>
answered Nov 12 at 19:04
Tholle
33.7k53760
answered Nov 12 at 19:04
Tholle
33.7k53760
answered Nov 12 at 19:04
Tholle
33.7k53760
answered Nov 12 at 19:04
Tholle
33.7k53760
33.7k53760
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268348%2flink-doesnt-work-properly-inside-modal-component-with-react-router%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It should work if you just put
Linkinside ofHashRouter, so thatLinkwill get the right history object from the context provided by the router. Doesn't it work for you to just put it there instead?– Tholle
Nov 12 at 18:53
1
I actually added
HashRouter, and it works! Now the modal still keeps on the top of the page. Well, that's already a half way done. I'm still learning router however, this solves the issue. Thank you.– Guilherme Nunes
Nov 12 at 19:00