React scroll with redirect to other route path

Question

I have a problem with my page that I build. There is main route path like "/" where is all page but there is also route path "/privacy" where you can go by clicking button "Privacy policy". Main navigation and footer with navigation are displaying at "/" and "/privacy" also.

It looks like this:

        <Route exact path="/">
            <Header />
            <Main />
            <Footer />
        </Route>
        <Route path="/privacy">
            <Header />
            <Privacy />
            <Footer />
        </Route>

The Main component looks like this

const Main = () => {


return (
    <>
        <Hello />
        <Services />
        <Projects />
        <About />
        <Contact />
    </>
)}

All buttons in nav are react-scroll links.

         <ul>
            <li><Link to="header" smooth="true" duration={1000}>Main</Link></li>
            <li><Link to="services" smooth="true" duration={1000}>Services</Link></li>
            <li><Link to="webdev" smooth="true" duration={1000}>Portfolio</Link></li>
            <li><Link to="about" smooth="true" duration={1000}>About</Link></li>
            <li><Link to="contact" smooth="true" duration={1000}>Contact</Link></li>
         </ul>

How can I redirect user from "/privacy" and scroll to - for example - about component at my "/" route path when he clicks "About" button in nav?

Example:

User is at "/privacy" and he wants to read "About" section, so he clicks button "About" in nav and then website is redirecting to "/" and scrolling to "About" section.

score 1 · Accepted Answer · answered Oct 27 '20 at 17:52

So. Add to component / root element of component about id="about" and then in your link set path <Link to="/#about"...... You can find info how to make links to content on the same page here (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)

Caeta · Answer 2 · 2023-01-10T18:26:06.643

I used HashLink from the library react-router-hash-link. I simulated the home sections with two components Component1 and Component2 in order to make it more generic.

It's necessary install two packages npm install react-router-dom npm install react-router-hash-link

Here is the code:

Set the routes in the App.jsx

App.jsx

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home } from "./components/Home";
import { Component0 } from "./components/Component0";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/component0" element={<Component0 />} />
      </Routes>
    </Router>
  );
}

export default App;

Home contains Component1 and Component2 and a button for navigating to Component0

Home.jsx

import React from 'react';
import { Component1 } from './Component1';
import { Component2 } from './Component2';
import { HashLink } from 'react-router-hash-link';

export const Home = props => 
{
    return (<>
        <HashLink to="/component0">
            <button>Button component 0</button>
        </HashLink>
        <Component1/>
        <Component2/>
    </>);
}

The Component0 is a separated section from which we can navigate to Component1 or Component2 by scrolling within the Home component. To navigate we use the HashLink with a wrapped button

Component.jsx

import React from 'react';
import { HashLink } from 'react-router-hash-link';

export const Component0 = props => 
{
    return (<>
        <HashLink smooth to="/#section-component1">
            <button>Component1</button>
        </HashLink>
        
        <HashLink smooth to="/#section-component2">
            <button>Component2</button>
        </HashLink>
    </>);
}

Component1 and Component2

Component1.jsx

import React from 'react';
import "./Component1.css"

export const Component1 = props => 
{
    return (<>
        <section id="section-component1">
            <h1>Section of component 1</h1>
        </section>
    </>);
}

Component2.jsx

import React from 'react';
import "./Component2.css"

export const Component2 = props => 
{
    return (<>
        <section id="section-component2">
            <h1>Section of component 2</h1>
        </section>
    </>);
}

Repo: https://github.com/JCaeta/react-navigation

React scroll with redirect to other route path

2 Answers2