News Articles react-router

Hosting a Next.js App (with routing) on AWS S3

Recently, we at Alpe Audio launched a new service, Example Finder, as part of our efforts to expose more parts of our content creation engine externally. Using Next.js as our go-to framework for React Apps, we encounter the issue of accessing URLs inside the app, not from the main page.When refreshing or sending a link […]

What is new in React Router V6?

Photo by Ferenc Almasi on Unsplash Do you know that the most popular library to manage your React application navigation has a new version? React Router is the most popular library to manage your React application navigation and the new version 6 brings with it very interesting novelties. Version 6 brings the component Routes, which is […]

Navigate in react router 6 doesn’t redirect to another page

I have a component with logout button. When I click on it, function logout works but doesn’t redirect me to login page. Could you explaine me why it happens? const Header = () => { const token = localStorage.getItem(‘token’); const userName = useSelector(getUserSelector); const logout = async () => { const res = await axios.delete(url, […]

How to pass props through Link

Fairly new to react here. I’m making a small recipe finder app with an api. After getting the data, I’m mapping through the results and displaying them in a component. What I want to do is display the details of each recipe through another component in another route. I’m not sure how to do this. […]

Prevent a page to load on browser back navigation

in my React app I have 3 pages say a, b, c. I navigate from ‘a’ – ‘b’ – c(on form submits goes to) – ‘b’. Now I am on page ‘b’ and click browser back. I am taken to page ‘c’ where I check a condition and if it fails I should be taken […]

Can’t access my admin dashboard on production

Config: react-router-dom v6.0.2, react v17.0.0, firebase v9.5.0 Hello, My app is hosted by netlify, all public routes are ok and I’ve set up my environment variables on netlify. I even set a _redirects file .But when I try to go on signup/login page I get a 404: Looks like you’ve followed a broken link or […]

<Router> inside another <Router>

I’m pretty new to React and react-router-dom (v6) and I stumbled on an error: "Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app." While there’s a similar post I didn’t find the answer I was looking for. As of right now I just have this […]

In react, export variable is always returning false even though we are setting the state to true in UseEffect Hook

Login.jsx import * as React from ‘react’; import Avatar from ‘@mui/material/Avatar’; import Button from ‘@mui/material/Button’; import CssBaseline from ‘@mui/material/CssBaseline’; import TextField from ‘@mui/material/TextField’; import FormControlLabel from ‘@mui/material/FormControlLabel’; import Checkbox from ‘@mui/material/Checkbox’; import Link from ‘@mui/material/Link’; import Paper from ‘@mui/material/Paper’; import Box from ‘@mui/material/Box’; import Grid from ‘@mui/material/Grid’; import LockOutlinedIcon from ‘@mui/icons-material/LockOutlined’; import Typography from ‘@mui/material/Typography’; […]

When react application is in production, while refreshing the same routes browser shows 404 error but not in localhost

I am making a website where all the routes works perfectly fine in localhost but in production it works fine on navigating but not when reloading the same page, why? Source: React – Stack Overflow

Slider in Reactjs

Hello Everyone hope you all are doing good, I’m converting the Html webpage into Reactjs everything was going good but only the below code is not working in react can anyone please help. <section className="mainslider" id="mainslider"> <div id="rev_slider_wrapper" className="rev_slider_wrapper fullwidthbanner-container" data-alias="product" style={{ margin: "0px auto", backgroundColor: "transparent", padding: "0px", marginTop: "0px", marginBottom: "0px" }}> <div […]

How to handle 3 different conditions in a React functional component

I am rendering out a lists of posts. There are 3 different types of content these posts will show. So the list view of all of these posts is the same. Standard title, thumbnail, author, etc. But when you go to the page of these 3 different types the content renders a different layout (different […]

How to see create a page of the details of a single product from an Ecommerce

I am developing an Ecommerce project, I managed to create a product grid and link to an route to the specific product, but i am unable to see the data of the item. My products code is here const Container = styled.div` padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; ` const Products = () […]

browser router not being exported from react router

I am tring to use the react router dom to make different pages so that it can go to different pages on click but the app does not compile since browser router is not being imported. I just copy pasted it straight from the website. Can someone tell me where the mistake is and how […]

How to return to the same scroll position when going back using useNavigate() or useLocation() react-router

When clicking on a specific pokemon, the user can show details of the pokemon. When the user clicks the back button to see all pokemon, I want them to continue in the exact same scroll position/pokemon, where they first clicked. How to achieve this? Here is the pokedex component, where the user can click on […]

How to change life cycle function to functional component in React

I tried to change from a class component to a functional component, but it didn’t work. What’s the problem? Class Component import React from ‘react’; import PropTypes from ‘prop-types’; const { Provider, Consumer } = React.createContext({}); class FormProvider extends React.PureComponent { static Consumer = Consumer; static getDerivedStateFromProps({ initValues }, prevState) { const values = initValues […]

How to navigate react page on ternary operators?

I’m trying to navigate to Authentication page (login page) if isLoggedIn is false using ternary operator but this isn’t working. Can you help please? export default function Admin(props) { let navigate=useNavigate(); return <>{props.isLoggedIn ? <div> <Row className={stylesadmin.root}> <Uploader/> <ToastContainer/> </Row> </div> : navigate(`/Auth`) }</> } Source: React – Stack Overflow

Changing state on redux-saga causes infinite loop inside component

I am trying to redirect user after successful login but changing state in saga is causing an infinite loop. component In my component I am using useSelector to listen to changes in isValidSession from store. If isValidSession changes to true, I want to redirect user to another page. However, when isValidSession is changed, my component […]

Can’t get react-router-dom to work (seeing blank page)

This is my App component that has 3 child components: Home, Contact and Procedures. I’m trying to make each child component into its own url route. However right now I’m just seeing a blank page FYI- I’m using [email protected] import {BrowserRouter, Routes, Route} from ‘react-router-dom’; import Home from ‘./Home.js’ import Contact from ‘./Contact.js’ import Procedures […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.