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…
Using the data router in React-Router 6 I want to redirect the user from an action, but also I need to return data. Can you do both at the same time? Redirect works, but no way to send data. export…
Main file: import React, { useContext, useEffect } from 'react'; import { Route, RouteProps, Routes, useLocation, useMatch } from 'react-router-dom'; import AuthenticationContext from './AuthenticationContext'; export type PrivateRouteProps = RouteProps & { Element?: React.ComponentType<any>; }; /* eslint-disable react/jsx-props-no-spreading */ function PrivateRoute({…
I'm working on this project to learn react, I haven't done dynamic routes before and am struggling with what to do. I have a bunch of playlists, that when click should take you to a page with all the tracks.…