I have a fairly simple routing setup in React (TypeScript). I have a Header and a Footer that I always want to display. A home component that displays my frontpage content. The part that bothers me a bit is the projects section. I have a seperate page called Projects that displays projects I have worked… Read More What would be best practice for implementing nested routes that have independent pages in React?

I want to load different components on component mount based on the URL params but my useParams() object room is showing as undefined in my useEffect() for some reason. // App.js function App() { const { room } = useParams(); const [inGame, setInGame] = useState(false); useEffect(() => { console.log(room); // undefined socket.emit("am_i_in_game", room, (res) =>… Read More how to use useParams() inside of useEffect

Currently I am trying to do some animation transitions with a game I’m building in React and I don’t want the re-render/refresh function of href or window.location. How would I use <Link> from react-router-dom handled in this regard? const handleGameOver = () => { if (health < 1) { window.location = "/GameOverDied"; } else if… Read More How do I use <Link> to perform an action similar to " window.location = "/GameOverDied"; " in JS React?

I have a page with products. My problem is that when I try to click on a product, the url is changing, but nothing renders on the screen. It still shows the component where all the products are rendered. I tried couple of different things, but nothing seemed to work <Route path="store" element={<Store />}> <Route… Read More React not rendering component when changing routes

To reuse a component that loads different data in same format, same element is rendered in different path. How to change url based on route path in EmpPage.js App.js: { path: "emp-detail", element: <EmpRootLayout />, children: [ { index: true, element: <EmpPage />, loader: empListLoader, }, { path: "retired", element: <EmpPage />, loader: empListLoader, },… Read More REACTJS: Change loader API URL based on Rout path in React

this is my code why it shows id undefined? i want in the sale component access to both title & id of each book but id is undefined.how can i show the value of id in the Sale component? thank you for your help! App.js <Route path="books" element={<Dashboard />} /> <Route path="books/:booktitle" element={<BookDetails />} />… Read More How extract id from react router with useparams

I am building a react app to learn MUI opportunities and get this error in Browser: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default… Read More Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. In react project

So I’ve scouted for an answer but in most cases its just badly spelling or misplacing the call which I believe its not the case here. It’s React logic I somehow find hard to understand. I’m using This type of React Router and I’m trying to provide Outlet with a set of data that can… Read More Cannot update a component while rendering a different component. To locate the bad setState() call follow the stack trace as described

I am trying to build an APP in which the side menu items will be different on different page Layouts. I do not want to hardcode the link instead trying to make it reusable. But the menu is not expanding when wrapping it with the react-router-dom. TestMenuAccordion.tsx: import { useState } from "react"; const Accordion… Read More Problem using shared Layout for menu in React-Router-DOM v6

I’m learning the latest version of react and react-router-dom, I create a simple demo app. Home.jsx import React from "react"; const Home = () => { return ( <div>Home</div> ) } export default Home; About.jsx import React from "react"; const About = () => { return ( <div>About</div> ) } export default About index.jsx import… Read More How to use react-router-dom Link component with the new router RouterProvider properly?