Kevin Powell - Community•3w ago

Need help with react, and react-router.

Hey guys, I am working on a project, and I need some help. So basically in this project, the navbar and the hero-section or the first component of every page has to be wrapped under same div, because they both share the same background, and if I make them separate components, and apply background separately on them, the designs, aren't consistent. for example let's say on Home Page, I have multiple sections, like Hero section, feature section, testimonials section, etc, now I want navbar and hero section to be a same component basically under the same div and other components to be out of it, because navbar and her-section for each page shares the same background. How can I achieve it using React router and Shared Layouts ? Here's what my current code looks like -

2 Replies

drex08xOP•3w ago

js 

**routes.jsx** - 
import { lazy, Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router";
import AppLayout from "../layout/appLayout/AppLayout";

const Home = lazy(() => import("../pages/app/Home/Home"));
const AboutUs = lazy(() => import("../pages/app/About/About"));
const ContactUs = lazy(() => import("../pages/app/ContactUs/ContactUs"));
const Login = lazy(() => import("../pages/app/Login/Login"));
const Register = lazy(() => import("../pages/app/Register/Register"));

const AppRoutes = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading....</div>}>
        <Routes>
          <Route element={<AppLayout />}>
            <Route index element={<Home />} />
            <Route path="/about-us" element={<AboutUs />} />
            <Route path="/contact-us" element={<ContactUs />} />
            <Route path="/auth/login" element={<Login />} />
            <Route path="/auth/register" element={<Register />} />
          </Route>
        </Routes>
      </Suspense>
    </Router>
  );
};

export default AppRoutes;

**AppLayout.jsx **-
import { Navbar, Sidebar, Footer } from "../../components";
import { Outlet } from "react-router";

const AppLayout = () => {
  return (
    <>
      <Navbar />
      <Sidebar />
      <Outlet />
      <Footer />
    </>
  );
};

export default AppLayout;

**Home.jsx** - 
import React from "react";
const Home = () => {
  return (
    <>
      <div className="hero-section">Hero section</div>
      <div className="other-section">Other section</div>
    </>
  );
};

export default Home;

js 

**routes.jsx** - 
import { lazy, Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router";
import AppLayout from "../layout/appLayout/AppLayout";

const Home = lazy(() => import("../pages/app/Home/Home"));
const AboutUs = lazy(() => import("../pages/app/About/About"));
const ContactUs = lazy(() => import("../pages/app/ContactUs/ContactUs"));
const Login = lazy(() => import("../pages/app/Login/Login"));
const Register = lazy(() => import("../pages/app/Register/Register"));

const AppRoutes = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading....</div>}>
        <Routes>
          <Route element={<AppLayout />}>
            <Route index element={<Home />} />
            <Route path="/about-us" element={<AboutUs />} />
            <Route path="/contact-us" element={<ContactUs />} />
            <Route path="/auth/login" element={<Login />} />
            <Route path="/auth/register" element={<Register />} />
          </Route>
        </Routes>
      </Suspense>
    </Router>
  );
};

export default AppRoutes;

**AppLayout.jsx **-
import { Navbar, Sidebar, Footer } from "../../components";
import { Outlet } from "react-router";

const AppLayout = () => {
  return (
    <>
      <Navbar />
      <Sidebar />
      <Outlet />
      <Footer />
    </>
  );
};

export default AppLayout;

**Home.jsx** - 
import React from "react";
const Home = () => {
  return (
    <>
      <div className="hero-section">Hero section</div>
      <div className="other-section">Other section</div>
    </>
  );
};

export default Home;

clevermissfox•3w ago

I may be understanding but if youll need the same navbar and hero on every page, why not make a NavBar.jsx and a Hero.jsx, then a component that holds them both

import NavBar from 'NavBar';
import Hero from 'Hero';
export default function AboveTheFold() {
return (
<>
  <NavBar />
  <Hero />
</>
)
}

//App.jsx
import AboveTheFold from 'AboveTheFold' ;
export default function App() {
  return (
  <AboveTheFold />
  <OtherPageContent />
)
}

import NavBar from 'NavBar';
import Hero from 'Hero';
export default function AboveTheFold() {
return (
<>
  <NavBar />
  <Hero />
</>
)
}

//App.jsx
import AboveTheFold from 'AboveTheFold' ;
export default function App() {
  return (
  <AboveTheFold />
  <OtherPageContent />
)
}

Gaming

Programming

Need help with react, and react-router.

Did you find this page helpful?