We Keep Coding

How to navigate to another page with a smooth scroll on a specific id with react router and react scroll

i am trying to make navBar that navigate to another page and scroll down to some id on this page
this is the navBar component for my protofolio whih have 3 links the Projects should go to Home and then scroll down to projects id in the Project section
import React, { Component } from "react";
import logo from "../../images/logo.png";
import { Link } from "react-router-dom";
import Scroll from "react-scroll";
import "./NavBar.css";
const ScrollLink = Scroll.Link;
class NavBar extends Component {
render() {
return (
<div className="NavBar">
<Link to="/" className="logo-container">
<img className="logo" src={logo} alt="Mahboub logo"></img>
</Link>
<div className="Nav-links">
<Link to="/">Home</Link>
<ScrollLink
className="navy"
smooth={true}
duration={500}
to="projects"
>
projects
</ScrollLink>
<Link to="/">Contacts</Link>
</div>
</div>
);
}
}
export default NavBar;
here is the prjects component for project section in home page
function Projects() {
return (
<div className="Home-Projects">
<Element id="projects">
<h1>Projects</h1>
</Element>
<div className="Projects-container">
<ProjectElement />
</div>
</div>
);
}

If "duration" parameter isn't of great importance for you and you have no problems with Hooks, I'd like to suggest solution as follows.
You get rid of Scroll component and use plain Link from RR in your NavBar like so
<Link to="/#projects">projects</Link>
Since RR v5.1 Hooks was introduced. There is useLocation hook among them. Insert that hook at the very beginning of your Projects component like so:
function Projects() {
const location = useLocation()
...
When you hit Link from p.1, you get new location object of the form
location = {
...
pathname:"/",
...
hash: "#projects"
}
Call useEffect hook after useLocation like so:
useEffect(()=> {
if (location.hash) {
let elem = document.getElementById(location.hash.slice(1))
if (elem) {
elem.scrollIntoView({behavior: "smooth"})
}
} else {
window.scrollTo({top:0,left:0, behavior: "smooth"})
}
}, [location,])
And thats it. As you can see, if there is no hash in your url, your page would scroll to the top. Use [locaton,] as useEffect dependency prevents form scrolling when your page component rerenders not because of location changes.

I just add this in the index.css
html {
scroll-behavior: smooth;
}
and this
<ScrollLink
className="navy"
smooth={true}
duration={500}
to="projects"
>
projects
</ScrollLink>
became
Projects
this was so fast and simple and worked prefectly

For next.js
//https://yourdomain.com/page?scroll=scroll_here <---
import { useEffect } from 'react';
import { Flex } from '#chakra-ui/react';
import { useRouter } from 'next/router';
export default function DecisionAreaFlex(props) {
const router = useRouter();
useEffect(() => {
console.log('router query', router.query.scroll);
if (router.query.scroll) {
let elem = document.getElementById(router.query.scroll);
if (elem) {
elem.scrollIntoView({ behavior: 'smooth' });
}
} else {
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
}
}, [router]);
return (
<Flex
alignSelf="center"
justifyContent="center"
alignItems="center"
mt="15px"
id={'scroll_here'} // <---
>
{props.children}
</Flex>
);
}

I've created a query param called anchor, and with that I can control the scroll based on the useEffect.
The link: /about?anchor=capabilities
The code on the page which should have the smooth scroll:
const router = useRouter();
useEffect(()=> {
if (router?.query?.anchor) {
let elem = document.getElementById(router?.query?.anchor)
if (elem) {
elem.scrollIntoView({behavior: "smooth"});
}
}
}, [router?.query?.anchor])

here is the simplest solution for scrolling to an id from another page.
use this code on the page where you have sections with any xyz id.
now on the other pages use simple NavLink from react-router-dom having "to" attribute like this to="/#xy"
let location = useLocation()
useEffect(()=> {
if (location.hash) {
let elem = document.getElementById(location.hash.slice(1))
if(elem) {
elem.scrollIntoView({behavior: "smooth"})
}
} else {
window.scrollTo({top:0,left:0, behavior: "smooth"})
}
}, [location,])

testing routing capabilities of preact-router

How would I be able to test the router in the code below? When using React you are able to use MemoryRouter to pass initialEntries to mock a route change but I cannot find an alternative for preact-router. I looked at the Preact docs and the preact-router docs but I am unable to find a clear solution.
import 'preact/debug';
import { h, render } from 'preact';
import HomePage from './pages/homepage';
import Router from 'preact-router';
import AsyncRoute from 'preact-async-route';
import './styles/index.scss';
const App = () => (
<Router>
<HomePage path="/" />
<AsyncRoute
path="/admin"
getComponent={ () => import('./pages/admin').then(module => module.default) }
/>
</Router>
);
export default App;

This is a little old, but I figured I would share what I found.
The first and quickest thing to do is to just use the route function in preact-router.
import { render, route } from 'preact-router';
import App from './App';
describe('<App/>', () => {
it('renders admin', async () => {
const { container, findByText } = render(<App/>);
// Go to admin page
route('/admin');
// Wait for page to load since it's loaded async
await findByText(/Admin Page/);
// perform expectations.
});
});
While this works, I don't like that it relies on the brower's real history. Luckily, the <Router> component accepts a history prop of type CustomHistory. So you can use an in-memory implementation of a History API to make this happen. I think I've seen docs that suggest using the history package - however I had to make an adjustment
import { createMemoryHistory } from 'history';
class MemoryCustomHistory {
constructor(initialEntries = undefined) {
this.wrapped = createMemoryHistory({initialEntries});
}
get location() {
return this.wrapped.location;
}
// Listen APIs not quite compatible out of the box.
listen(callback) {
return this.wrapped.listen((locState) => callback(locState.location));
}
push(path) {
this.wrapped.push(path);
}
replace(path) {
this.wrapped.replace(path);
}
}
Next, update your app to accept a history property to pass to the <Router>
const App = ({history = undefined} = {}) => (
<Router history={history}>
<HomePage path="/" />
<AsyncRoute
path="/admin"
getComponent={ () => import('./pages/admin').then(module => module.default) }
/>
</Router>
);
Finally, just update the tests to wire your custom history to the app.
it('renders admin', async () => {
const history = new MemoryCustomHistory(['/admin]);
const { container, findByText } = render(<App history={history}/>);
// Wait for page to load since it's loaded async
await findByText(/Admin Page/);
// perform expectations.
});

How to get an component height to trigger Headroom in React?

This is my first time dealing with Gatsby and React, so I might be using the wrong approach on this matter. Anyway, this is what is going on.
From the gatsby-starter-hello-world, I'm building this site that will be composed of a front page with a Hero on the top, holding the intro information. Right bellow, I'm intending to insert some content (I'm not sure about what yet), with this <Header /> appearing on scroll. For that part, I'm intending on use Headroom.js, which already works in the site.
The thing is I need it to be triggered only after the bottom of the Hero component touches the top of the viewport. And this will happen only in desktop and laptops. On mobile I intend to make it a fixed navbar.
Anyway, right now, this is what I have for a Layout.js
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Hero from "./index/hero"
import Header from "./header"
import Headroom from "react-headroom"
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`)
function() getHeroSize {
var heroHeight = Hero.clientHeight;
}
return (
<>
<Hero siteTitle={data.site.siteMetadata.title} ref="inner" />
<div className={"container mx-auto"}>
<Headroom pinStart={heroHeight}>
<Header siteTitle={data.site.siteMetadata.title} />
</Headroom>
<div
//style={{
// margin: `0 auto`,
// maxWidth: 960,
// padding: `0px 1.0875rem 1.45rem`,
// paddingTop: 0,
//}}
>
<main>{children}</main>
<footer>
© {new Date().getFullYear()}, Construído com
{` `}
Gatsby
</footer>
</div>
</div>
</>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
The function getHeroSize above is more like an intention display of what I'm thinking. It doesn't really work.
I'm using Tailwind CSS and sourcing some content from Trello using gatsby-source-trello. Not yet sure how to make this Layout.js, but this is what I've got from some testing that worked pretty good, so far. I understand that there'll be some work to do within gatsby-node.js, but I believe this header will be there in any other page I create, so.
Any thoughts, suggestions or links to documentation would be really appreaciated. Thanks in advance!

Your Hero component would need to use forwardRef to pass the ref to the nearest React element:
const Hero = React.forwardRef((props, ref) =>
<div ref={ref}>
{props.title}
</div>
Then you'll need to create a ref in Layout and pass that to Hero:
import React, { useRef } from "react"
const Layout = ({ children }) => {
const heroRef = useRef()
// ...
return (
<>
<Hero title={data.site.siteMetadata.title} ref={heroRef} />
{/* ... */}
</>
)
}
Finally, you'll want to use a hook to measure the actual height of the heroRef.current element. Here's one I use:
import { useEffect, useState } from "react"
import debounce from "lodash/debounce"
export default (ref, ttl = 100) => {
const [dimensions, setDimensions] = useState()
useEffect(() => {
if (!ref.current) return
const measure = debounce(() => {
if (ref.current) {
setDimensions(ref.current.getBoundingClientRect())
}
}, ttl)
measure()
window.addEventListener("resize", measure)
return () => {
window.removeEventListener("resize", measure)
}
}, [ref, ttl])
return dimensions
}
And here's how you might add that to Layout:
import useElementDimensions from "hooks/useElementDimensions"
const Layout = ({ children }) => {
const heroRef = useRef()
const heroDims = useElementDimensions(heroRef) || { top: 0, height: 0 }
const heroBottom = heroDims.top + heroDims.height
return (
<Headroom pinStart={heroBottom}>
<Header siteTitle={data.site.siteMetadata.title} />
</Headroom>
)
}

scroll into view after routing in react

How to scroll into view after routing in react
We are using react-router. What I want to achieve is do a scroll into view on one of component after react route to that page.

Here's a quick example for you using react-router-dom and refs. You didn't provide any code for us to look at so consider this a template. :)
Also here's a sandbox for your reference: https://codesandbox.io/s/adoring-surf-h55ci
So let's say your Routes are set-up like this:
Routes
function App() {
return (
<BrowserRouter>
<div>
<Route path="/" exact component={Home} />
<Route path="/example" component={Example} />
</div>
</BrowserRouter>
);
}
So user starts out at Home "/"
import React from "react";
import { Link } from "react-router-dom";
const Home = () => {
return <Link to="/example">Go To Example</Link>;
};
export default Home;
They click on the link and it takes them to the /example route, rendering Example
import React from "react";
import Section from "./Section";
class Example extends React.Component {
componentDidMount() {
if (this.mySection.current) {
this.mySection.current.scrollIntoView({
behavior: "smooth",
nearest: "block"
});
}
}
mySection = React.createRef();
render() {
return (
<div>
<div style={{ background: "orange", height: "750px" }}>
This is an example, below is my component.
</div>
<div ref={this.mySection}>
<Section />
</div>
</div>
);
}
}
export default Example;
Example has two parts, a div with plain text and the Section component. As you noticed, we wrap the Section component in a div and gave it a ref prop. The ref lets us communicate with that wrapper-div. In componentDidMount(), we just scroll to that div.

One way to scroll to a component would be to put a ref on the component you want to scroll to:
https://reactjs.org/docs/refs-and-the-dom.html
Once you have put the ref onto the component, you could then scroll to your ref in the componentDidMount() of the parent component, something like:
window.scrollTo(0, this.myRef.current.offsetTop)
You may need to be slightly more defensive here, and do something like this:
this.myRef && window.scrollTo(0, this.myRef.current.this.myRef)
This way, when the route is visited, the component will be scrolled to its offsetTop

All of these solution seem to be wrong
what expected is on click -> route -> scroll into a view
With above examples what will happen is on any render you scroll a particular element into a view...
The behaviour for general componentDidMount should stay as is ...
You can either add a hash to a routing to distinguish if it's a render from let's say page a - > then on page itself check if there is param in query.
Then the behaviour will be clean for componentDidMount.
For the above answers which i don't find correct you can use
useSmoothScroll(
target: string,
options: {
freezeStickyComponents?: boolean
hashLocation?: string
offset?: number | boolean
preventDefault?: boolean
} = {},
callback: (hash?: string) => void = DEFAULT_CALLBACK
): UseSmoothScrollCallback {
const defaultOptions = {
freezeStickyComponents: true,
hashLocation: null,
offset: false,
preventDefault: true
}
options = { ...defaultOptions, ...options }
const hasHash = options.hashLocation || target
const hash = hasHash && `${hasHash}`
const { freeze } = useStickyState()
return useCallback(
(event: SyntheticEvent<HTMLElement>): void => {
if (options.preventDefault) {
event.preventDefault()
}
if (!target) {
scrollToTop(callback)
return
}
const reference = document.getElementById(target)
if (typeof options.offset === 'number') {
window.scroll({
top:
reference?.getBoundingClientRect().top +
window.scrollY -
options.offset,
behavior: 'smooth'
})
} else {
reference?.scrollIntoView({
behavior: 'smooth'
})
}
window.history.pushState(null, null, hash)
callback(hash)
if (options.freezeStickyComponents) {
freeze(800)
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[freeze, hash, options, target]
)
}

Use anchors with react-router

How can I use react-router, and have a link navigate to a particular place on a particular page? (e.g. /home-page#section-three)
Details:
I am using react-router in my React app.
I have a site-wide navbar that needs to link to a particular parts of a page, like /home-page#section-three.
So even if you are on say /blog, clicking this link will still load the home page, with section-three scrolled into view. This is exactly how a standard <a href="/home-page#section-three> would work.
Note: The creators of react-router have not given an explicit answer. They say it is in progress, and in the mean time use other people's answers. I'll do my best to keep this question updated with progress & possible solutions until a dominant one emerges.
Research:
How to use normal anchor links with react-router
This question is from 2015 (so 10 years ago in react time). The most upvoted answer says to use HistoryLocation instead of HashLocation. Basically that means store the location in the window history, instead of in the hash fragment.
Bad news is... even using HistoryLocation (what most tutorials and docs say to do in 2016), anchor tags still don't work.
https://github.com/ReactTraining/react-router/issues/394
A thread on ReactTraining about how use anchor links with react-router. This is no confirmed answer. Be careful since most proposed answers are out of date (e.g. using the "hash" prop in <Link>)

React Router Hash Link worked for me and is easy to install and implement:
$ npm install --save react-router-hash-link
In your component.js import it as Link:
import { HashLink as Link } from 'react-router-hash-link';
And instead of using an anchor <a>, use <Link> :
<Link to="home-page#section-three">Section three</Link>
Note: I used HashRouter instead of Router:

This solution works with react-router v5
import React, { useEffect } from 'react'
import { Route, Switch, useLocation } from 'react-router-dom'
export default function App() {
const { pathname, hash, key } = useLocation();
useEffect(() => {
// if not a hash link, scroll to top
if (hash === '') {
window.scrollTo(0, 0);
}
// else scroll to id
else {
setTimeout(() => {
const id = hash.replace('#', '');
const element = document.getElementById(id);
if (element) {
element.scrollIntoView();
}
}, 0);
}
}, [pathname, hash, key]); // do this on route change
return (
<Switch>
<Route exact path="/" component={Home} />
.
.
</Switch>
)
}
In the component
<Link to="/#home"> Home </Link>

Here is one solution I have found (October 2016). It is is cross-browser compatible (tested in Internet Explorer, Firefox, Chrome, mobile Safari, and Safari).
You can provide an onUpdate property to your Router. This is called any time a route updates. This solution uses the onUpdate property to check if there is a DOM element that matches the hash, and then scrolls to it after the route transition is complete.
You must be using browserHistory and not hashHistory.
The answer is by "Rafrax" in Hash links #394.
Add this code to the place where you define <Router>:
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
const routes = (
// your routes
);
function hashLinkScroll() {
const { hash } = window.location;
if (hash !== '') {
// Push onto callback queue so it runs after the DOM is updated,
// this is required when navigating from a different page so that
// the element is rendered on the page before trying to getElementById.
setTimeout(() => {
const id = hash.replace('#', '');
const element = document.getElementById(id);
if (element) element.scrollIntoView();
}, 0);
}
}
render(
<Router
history={browserHistory}
routes={routes}
onUpdate={hashLinkScroll}
/>,
document.getElementById('root')
)
If you are feeling lazy and don't want to copy that code, you can use Anchorate which just defines that function for you. https://github.com/adjohnson916/anchorate

Here's a simple solution that doesn't require any subscriptions nor third-party packages. It should work with react-router#3 and above and react-router-dom.
Working example: https://fglet.codesandbox.io/
Source (unfortunately, it doesn't currently work within the editor):
#ScrollHandler Hook Example
import { useEffect } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";
const ScrollHandler = ({ location, children }) => {
useEffect(
() => {
const element = document.getElementById(location.hash.replace("#", ""));
setTimeout(() => {
window.scrollTo({
behavior: element ? "smooth" : "auto",
top: element ? element.offsetTop : 0
});
}, 100);
}, [location]);
);
return children;
};
ScrollHandler.propTypes = {
children: PropTypes.node.isRequired,
location: PropTypes.shape({
hash: PropTypes.string,
}).isRequired
};
export default withRouter(ScrollHandler);
#ScrollHandler Class Example
import { PureComponent } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";
class ScrollHandler extends PureComponent {
componentDidMount = () => this.handleScroll();
componentDidUpdate = prevProps => {
const { location: { pathname, hash } } = this.props;
if (
pathname !== prevProps.location.pathname ||
hash !== prevProps.location.hash
) {
this.handleScroll();
}
};
handleScroll = () => {
const { location: { hash } } = this.props;
const element = document.getElementById(hash.replace("#", ""));
setTimeout(() => {
window.scrollTo({
behavior: element ? "smooth" : "auto",
top: element ? element.offsetTop : 0
});
}, 100);
};
render = () => this.props.children;
};
ScrollHandler.propTypes = {
children: PropTypes.node.isRequired,
location: PropTypes.shape({
hash: PropTypes.string,
pathname: PropTypes.string,
})
};
export default withRouter(ScrollHandler);

Just avoid using react-router for local scrolling:
document.getElementById('myElementSomewhere').scrollIntoView()

The problem with Don P's answer is sometimes the element with the id is still been rendered or loaded if that section depends on some async action. The following function will try to find the element by id and navigate to it and retry every 100 ms until it reaches a maximum of 50 retries:
scrollToLocation = () => {
const { hash } = window.location;
if (hash !== '') {
let retries = 0;
const id = hash.replace('#', '');
const scroll = () => {
retries += 0;
if (retries > 50) return;
const element = document.getElementById(id);
if (element) {
setTimeout(() => element.scrollIntoView(), 0);
} else {
setTimeout(scroll, 100);
}
};
scroll();
}
}

I adapted Don P's solution (see above) to react-router 4 (Jan 2019) because there is no onUpdate prop on <Router> any more.
import React from 'react';
import * as ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';
import { createBrowserHistory } from 'history';
const browserHistory = createBrowserHistory();
browserHistory.listen(location => {
const { hash } = location;
if (hash !== '') {
// Push onto callback queue so it runs after the DOM is updated,
// this is required when navigating from a different page so that
// the element is rendered on the page before trying to getElementById.
setTimeout(
() => {
const id = hash.replace('#', '');
const element = document.getElementById(id);
if (element) {
element.scrollIntoView();
}
},
0
);
}
});
ReactDOM.render(
<Router history={browserHistory}>
// insert your routes here...
/>,
document.getElementById('root')
)

<Link to='/homepage#faq-1'>Question 1</Link>
useEffect(() => {
const hash = props.history.location.hash
if (hash && document.getElementById(hash.substr(1))) {
// Check if there is a hash and if an element with that id exists
document.getElementById(hash.substr(1)).scrollIntoView({behavior: "smooth"})
}
}, [props.history.location.hash]) // Fires when component mounts and every time hash changes

For simple in-page navigation you could add something like this, though it doesn't handle initializing the page -
// handle back/fwd buttons
function hashHandler() {
const id = window.location.hash.slice(1) // remove leading '#'
const el = document.getElementById(id)
if (el) {
el.scrollIntoView()
}
}
window.addEventListener('hashchange', hashHandler, false)

An alternative: react-scrollchor https://www.npmjs.com/package/react-scrollchor
react-scrollchor: A React component for scroll to #hash links with smooth animations. Scrollchor is a mix of Scroll and Anchor
Note: It doesn't use react-router

Create A scrollHandle component
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export const ScrollHandler = ({ children}) => {
const { pathname, hash } = useLocation()
const handleScroll = () => {
const element = document.getElementById(hash.replace("#", ""));
setTimeout(() => {
window.scrollTo({
behavior: element ? "smooth" : "auto",
top: element ? element.offsetTop : 0
});
}, 100);
};
useEffect(() => {
handleScroll()
}, [pathname, hash])
return children
}
Import ScrollHandler component directly into your app.js file
or you can create a higher order component withScrollHandler and export your app as withScrollHandler(App)
And in links <Link to='/page#section'>Section</Link> or <Link to='#section'>Section</Link>
And add id="section" in your section component

I know it's old but in my latest react-router-dom#6.4.4, this simple attribute reloadDocument is working:
div>
<Link to="#result" reloadDocument>GO TO ⬇ (Navigate to Same Page) </Link>
</div>
<div id='result'>CLICK 'GO TO' ABOVE TO REACH HERE</div>