after

` – Login
– Mainpage
-Homepage(welcome page)
-Dashboard
-Dash1

`

the problem is that i am not able to navigate to dash1 till dashboard I am able to navigate but for dash1 their is some problem

(Index.js)

import React from 'react';
    import { createRoot } from 'react-dom/client'; // Import createRoot
     import { BrowserRouter } from 'react-router-dom';
     import App from './App'; // Adjust the import path as necessary
  import './index.css'; // Import any global CSS

 const container = document.getElementById('root'); // Get the root element
 const root = createRoot(container); // Create a root

    root.render(
        <React.StrictMode>
      <BrowserRouter>
          <App />
       </BrowserRouter>


       </React.StrictMode>
    ) ;

(App.js)

 import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import LoginPage from './LoginPage';
import MainPage from './MainPage';
import 'tailwindcss/tailwind.css'; // This imports Tailwind's base styles


function App() {
  return (
     
        <Routes>
            <Route path="/" element={<LoginPage />} />
            <Route path="/main/*" element={<MainPage />} />
        </Routes>
    
  );

}

 export default App;

(MainPage.js)

    import React, { useState } from 'react';
     import { Route, Routes } from 'react-router-dom';
    import Header from './components/Header';
    import Sidebar from './components/Sidebar';
    import HomePage from './components/HomePage';
    import Dashboard from './components/Dashboard';
    import Config from './components/Config';
    import Discovery from './components/Discovery';
    import Dash1 from './components/Dash1';
     import Dash2 from './components/Dash2';
   import Dash3 from './components/Dash3';
    import './MainPage.css'; // Import your CSS file

    const MainPage = () => {
    const [isOpen, setIsOpen] = useState(false);

     const toggleSidebar = () => {
     setIsOpen(!isOpen);
    };

     return (
     <div className={`main-container ${isOpen ? 'sidebar-open' : 'sidebar-closed'}`}>
     <Header isOpen={isOpen} />
       <div className="content-container">
       <Sidebar isOpen={isOpen} toggleSidebar={toggleSidebar} />
       <main className="main-content">
         <Routes>
           <Route path="/" element={<HomePage />} />
           <Route path="/dashboard/*" element={<Dashboard />}>
             <Route path="dash1" element={<Dash1 />} />
             <Route path="dash2" element={<Dash2 />} /> 
             <Route path="dash3" element={<Dash3 />} />
           </Route>
           <Route path="/config" element={<Config />} />
           <Route path="/discovery" element={<Discovery />} />
         </Routes>
       </main>
     </div>
    </div>
    );
     };

export default MainPage;

so from the please help me find out what is causing the error

I tried changing the routers.

I changed the routes to app.js only but had some issue