My react component is not displaying using routes

kaay 0
Viewed 26

I have a personal project I'm working on and I have run into a bit of a problem. I have two simple code snippets one for the component and one for handling the route.

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

function setPath {
  return (
    <Routes>
      <Route path="/sect/guest" element={<MobileCardsGuest />} />
    <Routes/>
  )
}

the setPath component is called in App.js

component to be displayed

import React from "react";
import eventIcon from "../../assets/img/red-carpet.png";
import mealIcon from "../../assets/img/hamburger.png";
import accIcon from "../../assets/img/accomodation.png";
import "../../assets/css/mobilecards.css";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";

function MobileCardsGuest() {
  const notify = ()=>{
    return toast.info("Coming Soon")
  }
  
  return (
    <div className="mobile-card">
      <p className="text-center mob-title">
        <b style={{ color: "var(--pieme-color)" }}>You are Welcome!</b>
      </p>
      <p className="text-center mob-body">Please choose what you would like</p>
      <div class="card bg-light m-card">
     
        
        <p></p>
          <img src={mealIcon} className="iconimg" alt="Meal Icon" />
          <div class="card-body text-center">
            <p class="card-text">Meal</p>
          </div>
                  </div>

      <div class="card bg-light m-card">
       
       
        <p></p>
          <img src={accIcon} className="iconimg" alt="Acc Icon" />
          <div class="card-body text-center">
            <p class="card-text">Accomodation</p>
          </div>
        </Link>
     

      <div class="card bg-light m-card" onClick={notify}>
        <p></p>
        <img src={eventIcon} className="iconimg" alt="Event Icon" />
        <div class="card-body text-center">
          <p class="card-text">Event</p>
        </div>
      </div>
    </div>
  );
}

export default MobileCardsGuest;

the other component

import useNavigate from "react-router-dom"
const navigate= useNavigate();
function Navbar{
  return (
      <button onClick={() => {navigate("/sect/guest")>
          Guest
      </button>
  )
}

When I run the above and go to the path "/sect/guest" it doesn't display the component.

react-router-dom react-router reactjs javascript
2 Answers

You need to import BrowserRouter as well.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MobileCardsGuest from './path/MobileCardsGuest';

const SetPath = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path='/sect/guest' element={<MobileCardsGuest />} />
      </Routes>
      ... ...
    </BrowserRouter>
  );
}

export default SetPath;
Kevin Su0

If you are using react 18 or latest react-router-dom then your routes structure would be like :

<Router>
  <Routes>
   <Route path="/" element={<Home />} />
   <Route path="/cart" element={<Cart />} />
  </Routes>
<Router>

Here BrowserRouter and switch will not beused in newer version applications.

UmangBhalodiya0
Related