menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

react routing

August 16, 2021 at 5:51pm
I want to create http://john.wethemez.com/ this website-style routing in react. how can i create it?

August 16, 2021 at 5:59pm
I guess you should use window.scrollTo
I didn’t understand his concept, his site is not about web design at all
This isn't routing at all. This is basic html. You can use html id's on the section, and have the href's name those id's. Simple CSS can get the smooth scrolling, or use JS to move the page.
html {
scroll-behavior: smooth;
}
<a href="#my-section" />
<section id="my-section" />

August 17, 2021 at 6:52am
i know about this. i want to create when i click menu section, this section will change but href will not change

August 17, 2021 at 1:03pm
Then you'll need to use JS as I mentioned. Lots of ways to handle that. Here's one example...
import React from "react";
const App = () => {
const mySectionRef = React.useRef(null);
function handleClick(e) {
/* don't change the href */
e.preventDefault();
if (mySectionRef.current) {
/* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView */
mySectionRef.current.scrollIntoView({ behavior: "smooth" });
}
}
return (
<div>
<div id="#menu">
<a href="#my-section" onClick={handleClick} />
</div>
<section id="my-section" ref={mySectionRef} />
</div>
);
};

August 17, 2021 at 7:53pm
can you tell me please one thing? how can i active menu using your code style implement?

August 18, 2021 at 1:27pm
For the website above, you'd have to use an IntersectionObserver to "observe" which section is visible, and then add a className when observed. It's not exactly an "easy" thing to do though, as multiple sections could be shown at the same time. Kind of a more advanced technique.
I might recommend using Greensock's ScrollTrigger (which solved a few things my library ScrollScene didn't, and vice versa). Not sure I'd recommend tackling this if you're just starting out in React and JS in general.
let st = ScrollTrigger.create({
trigger: mySectionRef.current,
start: "top center",
end: "bottom center",
onToggle: (self) => console.log("toggled, isActive:", self.isActive),
});