Question 74346 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Routes working fine but not rendering components – Reactjs

I am routing between child components in a parent component. Routes are working fine on click but the child components are not rendering on page. No errors in console. No errors in code according to ChatGPT.

I resolved every issue but components do not render on page even route is working fine in url and there are no errors in console.

App.js

import './App.css';
import Navbar from './components/Navbar';
import { Routes, Route } from 'react-router-dom';
import NewOrder from './components/NewOrder';
import Orders from './components/Orders';

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path='/newOrder/*' element={<NewOrder />} />
        <Route exact path='/orders' element={<Orders />} />
      </Routes>
    </>
  );
}

export default App;

NewOrder.jsx

import React from 'react'
import { Link, Route, Routes } from 'react-router-dom'
import ChooseBun from './ChooseBun.jsx'
import ChooseFillet from './ChooseFillet.jsx'
import './NewOrder.css'

const NewOrder = () => {
  return (
    <>
      <div className='container'>
        <h1>Make Your Own Burger!</h1>
        <ul>
          <li>
            <Link to="/newOrder/choose-bun">Child 1</Link>
          </li>
          <li>
            <Link to="/newOrder/choose-meat">Child 2</Link>
          </li>
        </ul>
        {/* <ChooseBun/> */}
        <Routes>
          <Route path='/newOrder/choose-bun' element={<ChooseBun />} />
          <Route path='/newOrder/choose-meat' element={<ChooseFillet />} />
        </Routes>
      </div>
    </>
  )
}

export default NewOrder

Child1 which is ChooseBun.jsx

import React, { useEffect, useRef, useState } from 'react'
import './NewOrder.css'
import bun1 from '../images/front-view-tasty-meat-burger-with-cheese-salad-dark-background.jpg'
import { useNavigate } from 'react-router-dom'

const ChooseBun = () => {
  const ref = useRef(null);
  const [selectImage, setSelectImage] = useState('');
  const [select, setSelect] = useState(false);

  const handleImageClick = (id) => {
    setSelectImage(id);
    setSelect(true);
  };

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (ref.current && !ref.current.contains(e.target)) {
        setSelectImage('');
        setSelect(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  let navigate = useNavigate();

  return (
    <>
      <div className="choose-bun">
        <h2>Choose Your Bun</h2>
        <div ref={ref}>
          <div className='mainContainer mt-5'>
            <img
              src={bun1}
              alt="Brioche Bun"
              className={`col-3 ${selectImage === 'img1' ? 'selected' : ''}`}
              onClick={() => handleImageClick('img1')}
            />
            <img
              src={bun1}
              alt="Brioche Bun"
              className={`col-3 ${selectImage === 'img2' ? 'selected' : ''}`}
              onClick={() => handleImageClick('img2')}
            />
            <img
              src={bun1}
              alt="Brioche Bun"
              className={`col-3 ${selectImage === 'img3' ? 'selected' : ''}`}
              onClick={() => handleImageClick('img3')}
            />
          </div>
          <div className='mainContainer mt-5'>
            <img
              src={bun1}
              alt="Brioche Bun"
              className={`col-3 ${selectImage === 'img4' ? 'selected' : ''}`}
              onClick={() => handleImageClick('img4')}
            />
            <img
              src={bun1}
              alt="Brioche Bun"
              className={`col-3 ${selectImage === 'img5' ? 'selected' : ''}`}
              onClick={() => handleImageClick('img5')}
            />
            <img
              src={bun1}
              alt="Brioche Bun"
              className={`col-3 ${selectImage === 'img6' ? 'selected' : ''}`}
              onClick={() => handleImageClick('img6')}
            />
          </div>
        </div>
        <button
          className='btn btn-danger'
          disabled={!select}
          onClick={() => navigate('/newOrder/choose-meat')}
        >
          Next
        </button>
      </div>
    </>
  );
};

export default ChooseBun
Tags:

2

Answers


  1. 0

    I Edit your App.jsx to : wrap your Routes with BrowserRouter :

    function App() {
  return (
    <>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path='/newOrder' element={<NewOrder />} >
            <Route path='choose-bun' element={<ChooseBun />} />
            <Route path='choose-meat' element={<ChooseFillet />} />
          </Route>
          <Route exact path='/orders' element={<Orders />} />
        </Routes>
      </BrowserRouter>
        
    </>
  );
}

export default App;

    ChoosenFillet And ChooseBun are child of NewOrder. for access them in NewOrder, use Outlet

    NewOrder.jsx :

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

const NewOrder = () => {

  return (
    <>
      <div className='container'>
        <h1>Make Your Own Burger!</h1>
        <ul>
          <li>
            <Link to="/newOrder/choose-bun">Child 1</Link>
          </li>
          <li>
            <Link to="/newOrder/choose-meat">Child 2</Link>
          </li>
        </ul>
        {/* <ChooseBun/> */}
        <Outlet />
      </div>
    </>
  )
}
    Login or Signup to reply.
  2. 0

    Descendent routes in a Routes component build their paths relative to the parent route. The issue is that in the NewOrder component the routes will be relative from the parent "/newOrder/*" route path. In other words, the paths are actually "/newOrder/newOrder/choose-bun" and "/newOrder/newOrder/choose-meat".

    You should omit the leading "/newOrder" prefix from the descendent routes.

    const NewOrder = () => {
  return (
    <>
      <div className="container">
        <h1>Make Your Own Burger!</h1>
        <ul>
          <li>
            <Link to="/newOrder/choose-bun">Child 1</Link>
          </li>
          <li>
            <Link to="/newOrder/choose-meat">Child 2</Link>
          </li>
        </ul>
        {/* <ChooseBun/> */}
        <Routes>
          <Route path="/choose-bun" element={<ChooseBun />} />
          <Route path="/choose-meat" element={<ChooseFillet />} />
        </Routes>
      </div>
    </>
  );
};

    Edit routes-working-fine-but-not-rendering-components

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search