Страница с параллаксом Реагировать, перенаправить URL-адрес внутри страницы на компонент

Question

Я создаю эффект прокрутки параллакса в reactjs, я хочу перенаправить ссылку на странице.

Подробности: у меня есть одностраничное приложение, в котором у меня есть панель NavBar. У меня есть ссылки на несколько страниц, таких как Home, About и Contact. Я хочу, чтобы страница перенаправлялась на компонент " Контакт", когда я нажимаю ссылку "Контакт" на панели навигации, но теперь она просто обновляется, а я все еще нахожусь на домашней странице. Следовательно, URL-адрес обновляется, но я не смогу увидеть свой компонент Contact, поскольку он отображается только при прокрутке вниз.

Есть ли способ, при котором URL-адрес напрямую приведет меня к компоненту, когда я нажимаю ссылки из NavBar.

App.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import './App.css';
import WrapperParallax from './components/layout/WrapperParallax';

import Intro from './components/pages/Intro';
import About from './components/pages/About';
import Assignments from './components/pages/Assignments';
import Resume from './components/pages/Resume';
import Projects from './components/pages/Projects';
import Contact from './components/pages/Contact';

const App = () => {
  return (
      <Router>
        <Navbar />
        <WrapperParallax />
        <Switch>
          <Route exact path='/' component={Intro} />
          <Route exact path='/home' component={Intro} />
          <Route exact path='/about' component={About} />
          <Route exact path='/assignments' component={Assignments} />
          <Route exact path='/resume' component={Resume} />
          <Route exact path='/projects' component={Projects} />
          <Route exact path='/contact' component={Contact} />


        </Switch>
      </Router>
  );
};

export default App;

Навбар

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

const NavBar = () => {
  return (
    <Navbar collapseOnSelect expand='lg' bg='dark' variant='dark' sticky='top' className='navbar-navHeader'>
      <Navbar.Brand href='/' className="navbar-logo">Zeba</Navbar.Brand>
      <Navbar.Toggle className='navbar-toggle' aria-controls='responsive-navbar-nav' />
      <Navbar.Collapse id='responsive-navbar-nav'>
        <Nav className='ml-auto'>
          <Nav.Link className='navbar-link' href='/home'style={{color:'white'}} >Home</Nav.Link>
          <Nav.Link className='navbar-link' href='/about' style={{color:'white'}} >About</Nav.Link>
          <Nav.Link className='navbar-link' href='/assigments' style={{color:'white'}} >Assigments</Nav.Link>
          <Nav.Link className='navbar-link' href='/resume' style={{color:'white'}} >Resume</Nav.Link>
          <Nav.Link className='navbar-link' href='/project' style={{color:'white'}} >Projects</Nav.Link>
          <Nav.Link className='navbar-link' href='/contact' style={{color:'white'}} >Contact</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

export default NavBar;