I tried to find it, but I couldn't do it. I tested many results but the effects were disappointing (sometimes like my work :P) So I have this structure of application: <BrowserRouter> <Menu/> <Routes> <Route path="/business/:id" element={<SomePage />} /> </Routes>…
I'm coding a lyrics fetcher app (ReactJS + Redux + React router) that consists of a landing page where the app renders the top 10 tracks for the user's country, and also a search form to search for specific tracks.…
I'm playing around with React to build a simple little recipe keeper app and I'm coming across an issue I haven't yet figured out. import { useParams, useHistory, Link } from "react-router-dom"; import useFetch from "./useFetch"; const RecipeDetails = ()…
I'm having some difficulty with react routing and having trouble comprehending composed routes. I've attempted some code, but unfortunately, it's not functioning as expected. The "/" path works perfectly fine, however, when I attempt to access "/child", it doesn't seem…
My code has a component called MainLayout: MainLayout.jsx import React, { Fragment } from "react"; import Header from "../Common/Header"; import Footer from "../Common/Footer"; export default function MainLayout({ children }) { return ( <Fragment> <Header /> {children} <Footer /> </Fragment> );…
I have been trying to display the register component of my react app which comprises of register forms. However, I have not been able to succeed and the youtube videos are confusing me more. Here is my App.JS where i…
I am currently working on implementing a redirection to a confirmation page once the submission process becomes successful (i.e., when a boolean flag, onSubmit, turns true). However, I am encountering an error when utilizing the navigation method. My project involves…
What it did is I fetched some products data in context using useEffect and stored the fetched data in a state. Context Component import { useState, useEffect } from "react"; import ProductContext from "./product-context"; const ProductContextProvider = (props) => {…
In my react app I'm trying to render custom error component for unmatched routes but default error page is shown. This is how my browserRouter looks. const router = createBrowserRouter([ { path: "/feed", element: <App />, errorElement: <ErrorPage />, children:…
App.js :- function App() { return ( <div className="App"> <header className="App-header"> <div className="bg-slate-700 w-100 flex flex-col justify-center h-full"> <h1 className="font-bold text-white text-center justify-center "> User Authentication </h1> <form className="flex flex-col p-6 m-8 space-y-2 rounded-md bg-white "> <div className="text-cyan-500 text-center ">…