How To Implement Navigation In React JS ?

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>
);
reportWebVitals();

// App.js
import './App.css';
import {
    Link,
    Route,
    Routes
} from 'react-router-dom';
import Home from './Components/Home';
import About from './Components/About';
import Contact from './Components/Contact';

function App() {
    return (
        <div className="App">
            <div>
                <div style={{
                    display: 'flex',
                    justifyContent: 'space-evenly',
                    background: 'green',
                    fontSize: '20px',
                }}>
                    <Link to={'/'}
                        style={{ color: 'white' }}>
                        Home
                    </Link>
                    <Link to={'/about'}
                        style={
                            {
                                color: 'white'
                            }}>
                        About
                    </Link>
                    <Link to={'/contact'}
                        style={
                            {
                                color: 'white'
                            }}>
                        Contact
                    </Link>
                </div>
            </div>
            <Routes>
                <Route path="/"
                    element={<Home />} />
                <Route path="/about"
                    element={<About />} />
                <Route path="/contact"
                    element={<Contact />} />
            </Routes>
        </div>
    );
}

export default App;

// Home.jsx

import React from 'react'
import { Link } from 'react-router-dom'

const Home = () => {
    return (
        <div>
            This is home page
        </div>
    )
}

export default Home

// About.jsx
import React from 'react'
import { Link } from 'react-router-dom'

const About = () => {
    return (
        <div>
            This is about page
        </div>
    )
}

export default About

// Contact.jsx

import React from 'react'
import { Link } 
    from 'react-router-dom'

const Contact = () => {
    return (
        <div>
            This is contact page
        </div>
    )
}

export default Contact