我需要帮助了解如何使用React-Router设置从Navbar登录按钮到Login页面的导航。
app.js

import React from 'react';
import Header from './comp/Header';
import Howitworks from './comp/Howitworks';  
import About from './comp/About';
import Agent from './comp/Agent';

function App() {
  return (
    <div className="App">
      <Header/>
      <Howitworks/>
      <About/> 
      <Agent/>
    </div>
  );
}

export default App;

字符串
index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <App />
  </>,
  document.getElementById('root')
);

型
Header.jsx

import React from 'react';
import Navbar from './Navbar';
function Header() {
  return (
    <div className='header'>
        <Navbar/>
        <div className='intro'>
            <p>Looking for a Property !</p>
            <h1><span>Buy </span>and<span> Sell</span> Properties</h1>
            <p className='details'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, quae?<br/> by Hemdan</p>
            <a href='#' className='header-btn'>Details</a>
        </div>
    </div>
  )
}

export default Header;

型
Navbar.jsx

import React from 'react';
import logo from '../images/logo1.png';

function Navbar() {
  return (
    <nav>
        <a href='#' className='logo'>
        <img src={logo} alt='logo' />
        </a>
        <input className='menu-btn' type='checkbox' id='menu-btn'/>
        <label className='menu-icon' for='menu-btn'>
            <span className='nav-icon'></span>
        </label>
        <ul className='menu'>
            <li><a href='#'className='active'>Home</a></li>
            <li><a href='#'>About</a></li>
            <li><a href='#'>Sell</a></li>
            <li><a href='#'>Buy</a></li>
        </ul>
        <a href='#' className='property'>Login</a>
        
    </nav>
  )
}

export default Navbar;

型
尽管在浏览器中尝试了各种解决方案，但我一直在努力为我的React导航问题找到正确的解决方案。