Stop Reach Router scrolling down the page after navigating to new page
When I navigate to a new page, Reach Router scrolls down to the page content past the header (if the content is long enough). I'm assuming this is for accessibility but it's not necessary for my app and it's actually quite jarring. Can this behaviour be disabled?
Note that I'm talking about Reach Router not React Router.
Reach Router
reactjs reach-router
add a comment |
When I navigate to a new page, Reach Router scrolls down to the page content past the header (if the content is long enough). I'm assuming this is for accessibility but it's not necessary for my app and it's actually quite jarring. Can this behaviour be disabled?
Note that I'm talking about Reach Router not React Router.
Reach Router
reactjs reach-router
I had the same problem and I tweeted about it to the maintainers. Here's the response: twitter.com/ryanflorence/status/1057280035810410496
– Daksh Miglani
Oct 30 '18 at 14:37
add a comment |
When I navigate to a new page, Reach Router scrolls down to the page content past the header (if the content is long enough). I'm assuming this is for accessibility but it's not necessary for my app and it's actually quite jarring. Can this behaviour be disabled?
Note that I'm talking about Reach Router not React Router.
Reach Router
reactjs reach-router
When I navigate to a new page, Reach Router scrolls down to the page content past the header (if the content is long enough). I'm assuming this is for accessibility but it's not necessary for my app and it's actually quite jarring. Can this behaviour be disabled?
Note that I'm talking about Reach Router not React Router.
Reach Router
reactjs reach-router
reactjs reach-router
edited Oct 30 '18 at 14:23
c-chavez
2,17421733
2,17421733
asked Oct 30 '18 at 5:45
EvansEvans
4,27041158277
4,27041158277
I had the same problem and I tweeted about it to the maintainers. Here's the response: twitter.com/ryanflorence/status/1057280035810410496
– Daksh Miglani
Oct 30 '18 at 14:37
add a comment |
I had the same problem and I tweeted about it to the maintainers. Here's the response: twitter.com/ryanflorence/status/1057280035810410496
– Daksh Miglani
Oct 30 '18 at 14:37
I had the same problem and I tweeted about it to the maintainers. Here's the response: twitter.com/ryanflorence/status/1057280035810410496
– Daksh Miglani
Oct 30 '18 at 14:37
I had the same problem and I tweeted about it to the maintainers. Here's the response: twitter.com/ryanflorence/status/1057280035810410496
– Daksh Miglani
Oct 30 '18 at 14:37
add a comment |
1 Answer
1
active
oldest
votes
Try using <Router primary={false}>
which will not focus on the route component.
https://reach.tech/router/api/Router
primary: bool
Defaults to true. Primary Routers will manage focus on location transitions. If false, focus will not be managed. This is useful for Routers rendered as asides, headers, breadcrumbs etc. but not the main content.
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%2f53058110%2fstop-reach-router-scrolling-down-the-page-after-navigating-to-new-page%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
Try using <Router primary={false}>
which will not focus on the route component.
https://reach.tech/router/api/Router
primary: bool
Defaults to true. Primary Routers will manage focus on location transitions. If false, focus will not be managed. This is useful for Routers rendered as asides, headers, breadcrumbs etc. but not the main content.
add a comment |
Try using <Router primary={false}>
which will not focus on the route component.
https://reach.tech/router/api/Router
primary: bool
Defaults to true. Primary Routers will manage focus on location transitions. If false, focus will not be managed. This is useful for Routers rendered as asides, headers, breadcrumbs etc. but not the main content.
add a comment |
Try using <Router primary={false}>
which will not focus on the route component.
https://reach.tech/router/api/Router
primary: bool
Defaults to true. Primary Routers will manage focus on location transitions. If false, focus will not be managed. This is useful for Routers rendered as asides, headers, breadcrumbs etc. but not the main content.
Try using <Router primary={false}>
which will not focus on the route component.
https://reach.tech/router/api/Router
primary: bool
Defaults to true. Primary Routers will manage focus on location transitions. If false, focus will not be managed. This is useful for Routers rendered as asides, headers, breadcrumbs etc. but not the main content.
answered Nov 12 '18 at 14:43
ViniciusVinicius
332313
332313
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.
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%2f53058110%2fstop-reach-router-scrolling-down-the-page-after-navigating-to-new-page%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
I had the same problem and I tweeted about it to the maintainers. Here's the response: twitter.com/ryanflorence/status/1057280035810410496
– Daksh Miglani
Oct 30 '18 at 14:37