OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

I cant Load my my one of my page in react ... Routing issue ig

  • Thread starter Thread starter Saurav.s Shekhawat
  • Start date Start date
S

Saurav.s Shekhawat

Guest
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)

Code:
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)

Code:
 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>
    
  );

}

Code:
 export default App;

(MainPage.js)

Code:
    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

<p>after</p>
<p>` - Login
- Mainpage
-Homepage(welcome page)
-Dashboard
-Dash1</p>
<p>`</p>
<p>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</p>
<p>(Index.js)</p>
<pre><code>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>
) ;
</code></pre>
<p>(App.js)</p>
<pre><code> 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>

);
</code></pre>
<p>}</p>
<pre><code> export default App;
</code></pre>
<p>(MainPage.js)</p>
<pre><code> 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>
);
};
</code></pre>
<p>export default MainPage;</p>
<p>so from the please help me find out what is causing the error</p>
<p>I tried changing the routers.</p>
<p>I changed the routes to app.js only but had some issue</p>
 

Latest posts

Top