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 ">…
import './App.css'; import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; import { useEffect, useState } from 'react'; import MyHome from './components/MyHome'; import Header from './components/Header'; import Footer from './components/Footer'; import CommentList from './components/CommentList' import PostComment from './components/PostComment';…
import React from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; import Users from "./users/pages/Users"; const App = () => { return ( <Router> <Route path="/"> <Users /> </Route> </Router> ); }; export default App; I tried replacing…
import React, { useContext } from "react"; import { AuthContext } from "../context/auth"; import { Navigate, useLocation } from "react-router-dom"; const PrivateRoute = ({ component }) => { const { user } = useContext(AuthContext); let location = useLocation() if (!user)…