I am using React Router for my website and I encountered following problem. I have defined my main App component as follows: import './App.css' import { Navbar } from './Navbar' import { Outlet } from 'react-router' function App() { return…
AppRoutes: function AppRoutes(): JSX.Element { return ( <Routes> <Route path="/" element={<Auth />} /> <Route element={<RequiredAuth />}> <Route path="/home" element={<Home />} /> </Route> </Routes> ); } private routes checks import { Navigate, Outlet } from "react-router-dom"; import useAuth from "./hooks/useAuth"; const…
I am building SPA application. I have component with form changes to which could be either saved or canceled depending which button user pressed. I have a flag which indicates that some changes were made in this form. I am…
I'm a beginner developer trying to create a MERN stack Facebook clone where if the user is not logged in, they will be taken to a landing page with signup/login forms. If the user is logged in, they will be…
I get this warning when I wrapped my component in <Routes>. Warning: [Categories] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> App.js const App = () => { return ( <div className="app__container">…
This is my app.js import React from 'react' import Quote from './components/Quote'; import './index.css' import Abraham from './components/Abraham' import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; function App() { return ( <> <div> <Quote /> <h2>List of…
Initially, it works if the manually input link is wrong (Ex: "/characters/test"), but if it's the correct one, it still redirects to error 404. If the link is clicked from Character component, it works normally. Which means no matter what…
I solved my own problem already but I have no clue as to what's happening and why it works. I have a Link component that links to the same page it's currently on, but for a different product. So the…
I am facing an error like this everything works fine, it's compiled successfully but the app does not display on the browser and appears: "Uncaught Runtime error: Cannot read properties of null (reading 'useRef')" This is my code: import Navbar…
I'm currently working on a chat application. Currently in my App.tsx, I have the following. <Route path="/" element={<RootLayout />}> <Route index element={<Landing />} /> <Route path="auth" element={<Auth />} /> <Route path="chat" element={<Chat />} /> </Route> In my Chat.tsx, I have…