Hello I am making an website that shows pokemons from "https://pokeapi.co/api/v2/pokemon" and I am displaying them with .map(). every one of those has image title and link I want to make link to go to the /{pokemon.name} and display it…
Background I am having an issue implementing react routes Hello all. Pardon me but it's my first time here and I already made a post about this on Codecademy. I am gonna go ahead and copy and paste my thread…
I've seen many questions about this but none that work for me. Basically, I have a GameScreen component, where when the game starts, I want the URL path to change from "/roomcode/lobby" to "/roomcode/start". const [roomCode, setRoomCode] = useState(""); const…
In the documentation for react-router v6 (https://reactrouter.com/en/main/route/route) it says Omitting the path makes this route a "layout route". It participates in UI nesting, but it does not add any segments to the URL So why doesn't this work? const App…
app.js import React from "react"; import { createRoot } from "react-dom/client"; import { Provider } from "react-redux"; import configureStore from "./store/configureStore"; import { startSetExpenses } from "./actions/expenses"; import 'normalize.css/normalize.css'; import './styles/styles.scss'; import AppRouter from "./routers/AppRouter"; import 'react-dates/lib/css/_datepicker.css'; import { auth…
Below I have a SubComponent and a MainComponent. This is meant to be a page that displays an image collection. In the Subcomponent using the onclick() event you can swap between pictures in that collection. The MainComponent will also display…
I have created a changeColour function where the navbar changes colour after scrolling beyond a certain point which works perfectly. The problem is I only want it to take effect on my Home page and every other page (AboutUs, Shop,…
I am creating application in react using router below is my code main.jsx import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' import { Router} from 'react-router-dom' ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <Router> <App/> </Router> </React.StrictMode> ) app.jsx…
const pages = ['home', 'menu', 'reservation']; <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}> {pages.map((page) => ( <Link component={Link} to='/'>Home</Link> ))} </Box> I tried watching one or two videos on how to use Routing in MUI,…
I have Global file which holds the following routes: global.tsx import React from "react"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import LoginPage from "../../pages/Authentication/Login"; import SignupPage from "../../pages/Authentication/Signup"; const Global = () => { return (…