Is there a way to redirect components with links embedded when they are clicked in React?

  Kiến thức lập trình

I have a Navbar with the routes set up like this:

import '../styles/Nav.css'
import { BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
import { Home } from '../components/Home'
import { Contact } from '../components/Contact'
import { Error } from '../components/Error'

export const Navbar = () => {
  return (
      {/* Nav Links */}
      <div className='nav-major-container'>

        <div className='logo-container'>
          <p>Logo h</p>

        <nav className='nav-container'>
          <Link to='/' className='home-link'>Home</Link>
          <Link to='/contact' className='contact-link'>Contact</Link>


        <Route path='/' element={<Home/>}/>
        <Route path='/contact' element={<Contact/>}/>

        {/* Error Route */}
        <Route path='*' element={<Error/>}/>



I want to be able to click the links and be redirected to a part of the page with the component, similar to the a href in html. For example, when I click the Contact component, I want to be redirected to the part of the page with the Contact.jsx

As shown above, setting up the routes only made it so that when I click any of the links in the navbar, it displays the component on the page. This is not what I want.

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website