Reactjs - I want to setup route in my project (react, typescript, react-router-dom)

PonpitakS
November 3, 2023
223 views
0 votes
2 Answers

I would like it to work in the form of the 3rd route. Previously, if it was used, Navigate would not be called to display the Navbar on the page of the component, but if Homepage or Product was called, the Navbar would initially be called. I tried creating it in the manner below by storing my Navbar and Components in an Array, but got a warning, so I tried to find new ways.

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
} from "react-router-dom";

//pages
import ErrorPage from "@/pages/ErrorPage";
import LoginPage from "@/pages/LoginPage";
import RegisterPage from "@/pages/RegisterPage";

import Navigate from "@/components/Navigate";
import HomePage from "@/pages/HomePage";
import Products from "@/pages/Products";


const element = createRoutesFromElements(
  <>
    <Route path="*" element={<ErrorPage />} />
    <Route path="/" element={<LoginPage />} />
    <Route path="/register" element={<RegisterPage />} />

> I want to run the Navigate Component at once to be able to use it in the Homepage and Product Component.

    <Route path="/homepage" element={[<Navigate />, <HomePage />]} />
    <Route path="/products" element={[<Navigate />, <Products />]} />
  </>
);

export const router = createBrowserRouter(element);

Answers

Chosen as BEST ANSWER

My new code version
router.tsx


import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
} from "react-router-dom";

//pages
import ErrorPage from "@/pages/ErrorPage";
import LoginPage from "@/pages/LoginPage";
import RegisterPage from "@/pages/RegisterPage";

// import Navigate from "@/components/Navigate";
import HomePage from "@/pages/HomePage";
import Products from "@/pages/Products";
import { Product } from "@/pages/Product";

import Layout from "@/pages/layout";

const element = createRoutesFromElements(
  <>
    <Route path="*" element={<ErrorPage />} />
    <Route path="/" element={<LoginPage />} />
    <Route path="/register" element={<RegisterPage />} />
    <Route element={<Layout />}>
      <Route index path="/homepage" element={<HomePage />} />
      <Route path="products" element={<Products />} />
      <Route path="products/:id" element={<Product />} />
    </Route>
  </>
);

export const router = createBrowserRouter(element);

layout.tsx

import { Outlet } from "react-router-dom";
import Navigate from "@/components/Navigate";

export default function Layout() {
  return (
    <div>
      <Navigate />
      <Outlet />
    </div>
  );
}

Navigation.tsx

import { Container, Navbar, Nav, NavDropdown } from "react-bootstrap";
import { NavLink, useNavigate } from "react-router-dom";

export default function Navigate() {
  const navigate = useNavigate();

  return (
    <Navbar expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand key={0} href="/homepage">
          @Shoes Store
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav" className="">
          <Nav className="w-100 justify-content-end">
            <NavLink
              key={1}
              className={({ isActive, isPending }) =>
                isPending
                  ? "pending"
                  : isActive
                  ? "nav-link active"
                  : "nav-link"
              }
              to="/homepage"
            >
              Homepage
            </NavLink>
            <NavLink
              key={2}
              className={({ isActive, isPending }) =>
                isPending
                  ? "pending"
                  : isActive
                  ? "nav-link active"
                  : "nav-link"
              }
              to="/products"
            >
              Products
            </NavLink>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

(Edit)

You have to use Outlet component

An <Outlet/> should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered.

First thing you have to create an parent component, I am calling it Layout and wrap the common components like nav bar, footer.

Layout.js

import React from 'react';
import { Outlet } from 'react-router-dom';
import Navigate from "@/components/Navigate";

export default function Layout(props){
  
    return (
        <div>
            <Navigate/>
            <Outlet/>
        </div>
    )
}

Then you have to create a route as normally and apply index prop to render default child route.

In router

import {
    createBrowserRouter,
    createRoutesFromElements,
    Route,
} from "react-router-dom";

//pages
import ErrorPage from "@/pages/ErrorPage";
import LoginPage from "@/pages/LoginPage";
import RegisterPage from "@/pages/RegisterPage";

import Navigate from "@/components/Navigate";
import HomePage from "@/pages/HomePage";
import Products from "@/pages/Products";

import Layout from "@/pages/Layout";

const element = createRoutesFromElements(
    <>
        <Route path="*" element={<ErrorPage />} />
        <Route path="/" element={<LoginPage />} />
        <Route path="/register" element={<RegisterPage />} />
        <Route path="/homepage" element={<Layout />}>
            <Route index element={<HomePage />} />
            <Route path="/products" element={<Products />} />
        </Route>
    </>
);

export const router = createBrowserRouter(element);

Please signup or login to give your own answer.

Click here to cancel reply.

Reactjs – I want to setup route in my project (react, typescript, react-router-dom)

Answers