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 ">…
I am using React-Query besides React-Router and I can not extract the data with React-Query in App.jsx. function App() { const { isLoading, software } = useSoftware(); return ( <QueryClientProvider client={queryClient}> <ReactQueryDevtools initialIsOpen={false} /> <BrowserRouter> <GlobalStyles /> <Routes> <Route element={<AppLayout…
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';…
I'm getting this error I put the key prop everywhere they are needed: lists map functions but the error is still occurring, as you can see it says that error is occurring in method of "Rendered Route" I'm not sure…
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)…
import React , {useState} from "react"; import { Link } from 'react-router-dom'; import Typed from 'react-typed'; const Register = () => { const [data, setData] = useState({ first_name: '', last_name: '', email: '', password: '', error: null, loading: false, });…
useNavigate() may be used only in the context of a <Router> component. react-router-dom version is ^6.12.0. As shown above in attached image, we have a problem. What do you recommend to do?** Header Merchant button on navbar is not working…
I tried using react-router dom but it is giving me error. Can someone please help me resolving this? Here is the code And I am also enclosing the error which i am getting When i go to the source, I…
I am using React and react-router. When I try to go to this route <Route path="/blogs/:id" element={<Blog/>} /> from the Blogs page the whole content of the Blog page content is blank and I have a lot of errors. App.jsx…