9. Landing page with react‐router‐dom

1. npm install react-router-dom

2. Adding router context:

import { BrowserRouter } from 'react-router-dom'; 

Then add the surrounding BrowserRouter tags around App here: 
    <BrowserRouter>
      <App />
    </BrowserRouter>

3. In App.tsx, added the react hook useRoutes.

import { useRoutes } from "react-router-dom";

const element = useRoutes([
    { path: "/", element: <Home /> }, 
    { path: "/:id", element: <Home /> }, //id is dynamically passed. Here it is passed as strings such as #home, #consultants, #contact for 
    the scrolling work.  
    { path: "/tour", element: <MainView /> },
    { path: "/login", element: <Login /> },
    { path: "/register", element: <Register /> },
    { path: "/404", element: <NotFound /> },
  ])
  return (
    <>
      <NavBar />
      <div className='container-fluid'>{element}</div>
    </>

4. In NavBar.tsx component, linked to the ids mentioned above. Here:

                <header id="header">
			<a href="#" className="logo">SCU Virtual Tours</a>
			<ul>
				<li>
					<Link to='/' onClick={() => this.scrollTo("home")}>
						<div className="nav-links">Home</div>
					</Link>
				</li>
				<li>
					<Link to='/#consultants' onClick={() => this.scrollTo("consultants")}>
						<div className="nav-links">Tour Guides</div>
					</Link>
				</li>
				<li>
					<Link to='/#contact' onClick={() => this.scrollTo("contact")}>
						<div className="nav-links">Contact</div>
					</Link>
				</li>
				<li>
					<Link to='/register'>
						<div className="nav-links">Register</div>
					</Link>
				</li>
				<li>
					<Link to='/login'>
						<div className="nav-links">Login</div>
					</Link>
				</li>
			</ul>
		</header>