有没有一种方法可以在React中单击时嵌入链接来重定向组件？

Question

我有一个导航栏，其路线设置如下：

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 (
    <>
    <Router>
      
      {/* Nav Links */}
      <div className='nav-major-container'>

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

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

      </div>

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


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

    </Router>
    </>

  )
}

我希望能够点击链接并重定向到带有该组件的页面的一部分，类似于html中的

a href

。例如，当我单击“联系人”组件时，我想重定向到带有 Contact.jsx 的页面部分

如上所示，设置路由只是为了当我单击导航栏中的任何链接时，它会在页面上显示该组件。这不是我想要的。

Answer 1

我已经有一段时间没有对

react-router

做任何事情了，我假设您可以将 html 元素的 id 放在

#

组件中的

to

标签内的主题标签

Link

中，就像使用

a

标签的方式：

<Link to="#target"> Go to target! </Link>

我不确定它是否有效。但如果没有，请看一下这里