App with sidebar routes in React and Electron

Question

Hy, I'm developing a desktop app in React with Electron, and I'm unsure about how to handle routes, especially when dealing with a sidebar. How do I separate the routes?

For example, I have a Home page and I want to create a route for it from the sidebar. I created a Routes.js file to centralize the routes, and then I created a folder named "pages" and added Home.js inside it. However, I need to better understand the route flow in React and how to link the sidebar route to the page that will display the content of the Home page.

I'm practically doing everything in JS:

My routes file looks something like this (I removed the other routes and left only the one for home):

import React from "react";
import { BrowserRouter as Router, Routes, Route, BrowserRouter } from 'react-router-dom';
import HomePage from "../pages/Home/Home.js";

const AppRoutes = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<HomePage />} /> 
            </Routes>
        </BrowserRouter>
    );
};

export default AppRoutes;

And the home.js file looks like this. Since this is my first time doing something in React, my code is quite messy:

import React, { useState } from 'react';
import '../../pages/Home/Home.js';
import './Home.scss';
const HomePage = () => {
    const [highlightedIndex, setHighlightedIndex] = useState(false);
    const [displayText, setDisplayText] = useState('');

    const handleMouseEnter = () => {
        setHighlightedIndex(true);
    };

    const handleMouseLeave = () => {
        setHighlightedIndex(false);
    };

    return (
        <>
            <div
                className={`nav-button ${highlightedIndex ? 'highlighted' : ''}`}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
                onClick={handleClick}
            >
                <i className="pag page-home home"></i>
                <div className="Icons-options">
                    <img src="icons/Home-Icon.png" alt="Home Icon" />
                </div>
                <span style={{ color: '#FFFFFF' }}>Home</span>
            </div>
            <hr />
            {displayText && <p>{displayText}</p>}
        </>
    );
};

export default HomePage;