Javascript - How to link React Routes, to use it within the same page?

Matias
December 13, 2023
189 views
0 votes
2 Answers

I have the following problem, inside the home page I would like to put a sub menu in the middle of the page, which when clicking on each of the links, underneath I load some information. I did it with React-Router but the problem that arises is that it renders a new page, but I want it to render it within a part of the home page. I don’t know if I’m expressing myself well and if I understand what I want to do. I am going to leave a photo of what I want to achieve and also the code of what I have done so far. I only used it to paste separately the files that I had.

enter image description here

// MAKE AN ARRAY OF OBJECTS SO AS NOT TO FILL THE COMPONENT WITH LISTS SO MUCH.

export const dataSubMenu = [
  { id: 1, name: "Landing Page", boton: "Comienza Hoy", Link: "landing" },
  { id: 2, name: "Tienda Web", boton: "Comienza Hoy", Link: "tienda" },
  { id: 3, name: "Web Empresarial", boton: "Comienza Hoy", Link: "webEmpresarial" },
  { id: 4, name: "Web Hosting", boton: "Comienza Hoy", Link: "webHosting" },
  { id: 5, name: "Mas Servicios", boton: "Comienza Hoy", Link: "otrosServicios" },
]

/* THIS IS THE subMenu COMPONENT*/

import { dataSubMenu } from "./dataSubMenu";
import './subMenu.css';
import { NavLink } from "react-router-dom";

export const SubMenu = () => {
  return (
    <>
      <section className="conteiner__sub__menu">
        <ul>
          {dataSubMenu.map((item) => (
            <li key={item.id}>
              <NavLink className='menu__Item--a' to={item.Link}>
                 <h3>{item.name}</h3>
               </NavLink>
            </li>
          ))}
        </ul>
      </section>
    </>
  )
}

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { createContext, useState } from "react";
import { Header } from "./components/headers/header";
import { HomePage } from "./routes/home";
import { ProductsPage } from "./routes/products";
import { MasServiciosPage } from "./routes/masServicios";
import { NosotrosPage } from "./routes/nosotros";
import { ContactPage } from "./routes/contact";
import { NotFoundPage } from "./routes/notFoundPage";
import "./app.css";
import { LandingPage } from "./routes/landing";
import { TiendaPage } from "./routes/tienda";
import { WebEmpresarialPage } from "./routes/webEmpresarial";
import { WebHostingPage } from "./routes/webHosting";
import { OtrosServiciosPage } from "./routes/otrosServicios";
export const ThemeContext = createContext(null);

function App() {
  const [theme, setTheme] = useState("light");
  let html = document.querySelector("html");
  html.setAttribute("data-theme", theme);

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <>
        <Router>
          {/* TODO LO QUE ESTE POR FUERA DE <ROUTES> FUNCIONA COMO LAYOUT */}
          <Header />

          <Routes>
            {/* DEFINIMOS LAS RUTAS QUE VAMOS A USAR EN ROUTES*/}
            <Route path="/" element={<HomePage />} />
            <Route path="/home" element={<HomePage />} />
            <Route path="/products" element={<ProductsPage />} />
            <Route path="/masServicios" element={<MasServiciosPage />} />
            <Route path="/contact" element={<ContactPage />} />
            <Route path="/nosotros" element={<NosotrosPage />} />
           
            {/*ABAJO EMPIEZA EL CODIGO QUE ESCRIBI PARA ESO*/}
            <Route path="/landing" element={<LandingPage />} />
            <Route path="/tienda" element={<TiendaPage />} />
            <Route path="/webEmpresarial" element={<WebEmpresarialPage />} />
            <Route path="/webHosting" element={<WebHostingPage />} />
            <Route path="/otrosServicios" element={<OtrosServiciosPage />} />
           
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </Router>
      </>
    </ThemeContext.Provider>
  );
}

export default App;

Answers

The suggestion here would be to convert Home into a layout route component and render an Outlet where you would like the other routes to render their content. Nest the "dataSubMenu" routes under this parent layout route.

Example:

import { Outlet } from 'react-router-dom';

const HomePage = () => {
  ...

  return (
    ...
    <SubMenu />

    <div>        // <-- style/CSS this div for UI layout
      <Outlet /> // <-- nested route content renders here
    </div>

    ...
  );
};

<Router>
  <Header />

  <Routes>
    <Route path="/" element={<HomePage />}>
      {/* These routes render into Home page's Outlet */}
      <Route path="landing" element={<LandingPage />} />
      <Route path="tienda" element={<TiendaPage />} />
      <Route path="webEmpresarial" element={<WebEmpresarialPage />} />
      <Route path="webHosting" element={<WebHostingPage />} />
      <Route path="otrosServicios" element={<OtrosServiciosPage />} />
    </Route>
    <Route path="/home" element={<Navigate to="/" replace />} />
    <Route path="/products" element={<ProductsPage />} />
    <Route path="/masServicios" element={<MasServiciosPage />} />
    <Route path="/contact" element={<ContactPage />} />
    <Route path="/nosotros" element={<NosotrosPage />} />
    <Route path="*" element={<NotFoundPage />} />
  </Routes>      
</Router>

import { Outlet } from 'react-router-dom';

function App() {
  const [theme, setTheme] = useState("light");

  // Get the HTML element to set the theme attribute
  let html = document.querySelector("html");
  html.setAttribute("data-theme", theme);

  // Main component rendering the entire application
  return (
    // Provide theme-related information to components
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <>
        {/* Set up routing for different pages */}
        <Router>
          {/* Anything outside of <Routes> acts as the layout for all pages */}
          <Header />

          {/* Define the routes to be used in the application */}
          <Routes>
            {/* Set the main page when the application starts */}
            <Route path="/" element={<HomePage />} />

            {/* Nest routes to create a sub-menu on the home page */}
            <Route
              path="/home"
              element={
                <>
                  {/* Display the home page */}
                  <HomePage />

                  {/* Display a sub-menu on the home page */}
                  <SubMenu />

                  {/* Placeholder to render nested routes */}
                  <Outlet />
                </>
              }
            />

            {/* Routes for other pages */}
            <Route path="products" element={<ProductsPage />} />
            <Route path="masServicios" element={<MasServiciosPage />} />
            <Route path="contact" element={<ContactPage />} />
            <Route path="nosotros" element={<NosotrosPage />} />

            {/* Additional routes for specific features */}
            <Route path="landing" element={<LandingPage />} />
            <Route path="tienda" element={<TiendaPage />} />
            <Route path="webEmpresarial" element={<WebEmpresarialPage />} />
            <Route path="webHosting" element={<WebHostingPage />} />
            <Route path="otrosServicios" element={<OtrosServiciosPage />} />

            {/* Default route for pages that don't exist */}
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </Router>
      </>
    </ThemeContext.Provider>
  );
}

export default App;

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How to link React Routes, to use it within the same page?

Answers