how to route (navbar link) react website to another page specific element/component (like anchoring) with or without react-scroll

Question

the website i am trying to author, has 2 pages

page	route path	components	details
home	'/'	navbar,videgallery1,videogallery2,footer
concepts	'/concepts'	navbar,imggallery1,imggallery2,footer

Each page main component (video or image gallery) is twice for reason. its same but with different json content etc. (kind of category)

item	description
'/'	video gallery 1 (10 videos), video gallery 2(RealTime Section) (10 videos)
'/concepts'	image gallery 1(conceptart,50 images), image gallery 2 (Moodboards Section,40 images after concept art gallery)

Main Question

• i am trying to add 'RealTime' link via react-scroll (in nav file). it works when i am on homepage ('/') route. But fails when i am on second page (/concepts). How to tell it to first go to '/' then try to scroll to element or component.?
• same is case with 4th link (moodboards), it works from concept page but not from home page.
• also please notice that 'Link' is from ReactScroll is disabled, as i was trying to test react-scroll.
• if this can be acheived without react-scroll, that would be even better.

CODESANDBOX LINK

• here you can see, realtime link working on main page but not working when you are in concepts page.

navbar.js

import React from "react";
import "./styles.css";
import { NavLink } from "react-router-dom";
// import { Link } from "react-router-dom";
import { Link, DirectLink, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'

import MyLogo from '../img/logo_ff2_2021.png';
export default function Nav(){

  // navlinks can have a class of active, which can be styled, comparing to links
  // classname, style, children, to, exact
  return(
        <div className="navbar">
          <div className="logo">
            <img src="assets/logo_ff2_2021.png" style={{width:'100%'}} alt="logo" />
          </div>
           <ul className="nav-links">
              <NavLink style={({isActive}) => {return isActive ? {color: 'red'} : {}}} to="/">Home</NavLink>
              <Link  style={({isActive}) => {return isActive ? {color: 'red'} : {}}} to="RT" spy={true} smooth={true} duration={500}>RealTime</Link>
              <NavLink style={({isActive}) => {return isActive ? {color: 'red'} : {}}} to="/concepts">Concepts</NavLink>
              <Link  style={({isActive}) => {return isActive ? {color: 'red'} : {}}} to="Moodboards" spy={true} smooth={true} duration={500}>Moodboards</Link>
           </ul>
        </div>
  );

}

home.js

import headerVideo1 from '../assets/slide_rag.mp4';
import MyCarousel from '../components/Carousel';
import StickyFooter from '../components/Footer';
import VideoGallery from '../components/VideoGallery';
import VideoGallery2 from '../components/VideoGallery2';
import {  DirectLink, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'
import './Home.css';

export function Home() {

    // const videos = getVideos();
    return (
        <>
        <MyCarousel />
        <VideoGallery name="main" />
        <Element name="RT" className="element">
        <VideoGallery2 name="RT" />
        </Element>
        <StickyFooter />
        </>
    );
}
export default Home;

app.js

import React from 'react';
import './App.css';
import Nav from './components/Nav';
import { BrowserRouter , Route,Routes } from "react-router-dom";
import Home from './pages/Home';
import Concepts from './pages/Concepts';
import NotFound from './pages/NotFound';

function App() {

  return (
    <>
    <BrowserRouter>
      <div className="App">
        <Nav />
      </div>
    <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/footer" component={<StickyFooter/>} />
          <Route path="/concepts" element={<Concepts/>} />
          <Route path="/about" element={<About/>} />
    </Routes>
    </BrowserRouter>
    </>
  );
}

export default App;

Answer 1

I'd suggest importing and using link components from react-router-hash-link. You set the id attribute on a DOM element on the page you are linking to, and use this hash target in the link.

Nav Example:

import React from "react";
import "./styles.css";
import { NavHashLink } from 'react-router-hash-link'; // <-- import link component
import MyLogo from "../img/logo_ff2_2021.png";

export default function Nav() {
  return (
    <div className="navbar">
      <div className="logo">
        <img
          src="assets/logo_ff2_2021.png"
          style={{ width: "100%" }}
          alt="logo"
        />
      </div>
      <ul className="nav-links">
        <NavHashLink // <-- render link component
          style={({ isActive }) => {
            return isActive ? { color: "red" } : {};
          }}
          to="/"
        >
          Home
        </NavHashLink>
        <NavHashLink
          style={({ isActive }) => {
            return isActive ? { color: "red" } : {};
          }}
          to="/#RT" // <-- pass route and hash to target
          smooth
        >
          RealTime
        </NavHashLink>
        <NavHashLink
          style={({ isActive }) => {
            return isActive ? { color: "red" } : {};
          }}
          to="/concepts"
        >
          Concepts
        </NavHashLink>
        <NavHashLink
          style={({ isActive }) => {
            return isActive ? { color: "red" } : {};
          }}
          to="/concepts#Moodboards" // <-- pass route and hash to target
          smooth
        >
          Moodboards
        </NavHashLink>
      </ul>
    </div>
  );
}

Home

export function Home() {
  return (
    <>
      <VideoGallery name="main" />
      <div id="RT" className="element"> // <-- wrapper div with "RT" id to target
        <VideoGallery2 name="RT" />
      </div>
    </>
  );
}