So I want to have one or possibly more Routes in the future to be protected and only accessible if the user is authenticated, but so far I only have the "/dashboard" route as Protected but I when I run…
Here I'm trying to navigate to "/home" route using useNavigate() hook right after the login request is successful. Instead of routing to '/home', its reloading the "/login". Here I'm attaching code App.js export default function App() { const router =…
I am currently trying to create a website using React. But as the title states, I can't seem to get my content to appear in the localbrowser and I'm unsure where I went wrong. Image of localhost App.js: import React…
I have a News component which takes some props, and I want to make it re-render whenever I click on <Link /> with the corresponding category props. It updates the URL but does not re-render the component. <Routes> <Route path="/"…
I basically need to change the background by clicking Power button in component Header: Header.js import { Link } from 'react-router-dom'; import { faHome, faBars, faChevronLeft, faPowerOff, faBolt } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import App from…
error page is rendering below every component i want error page to render when the url is not acceptable but its not working help me with these import React from "react"; import { BrowserRouter as Router, Switch, Route, Routes, }…
How can I link to the corresponding child React component using Link from react-router-dom? By passing an id to the url. Now I'm getting the id, but the component isn't rendered. https://codesandbox.io/s/test-login-page-tasks-rmfn5j?file=/src/components/Taskslist.js Parent component const ParentComponent = ({ Tasks })…
I'm havin a list of tasks and I wonder how do I route on the specific task clicked. Do I need to send a special Id param to the onclick handler ? So that every task has it's own Id…
App.js const router = createBrowserRouter([ { path: '/', element: <MainHeader />, children:[ { index: true, element: <Home />, loader :loaderHome }, ] } ]) const App = () => { return <RouterProvider router={router} />; } export default App; MainHeader.js import…
I am doing the project using MERN stack. So I have compiled the code successfully by running npm start on both client side and server side. It will open http://localhost:3000/ when I fill the data and click on submit. It…