Questions tagged [react-router]

Created a small react app to showcase my project portfolio, but when I deployed it using gh-pages, nothing appears on the browser. It's just a blank screen. However, when running it locally with npm start, everything works perfectly. No errors are di ...

Struggling with implementing authentication in React Router. I am using componentDidMount to check if the user is logged in by calling an endpoint. If not, it should redirect to login, otherwise proceed to the desired component. However, this setup doesn't ...

As part of my React website, I have implemented a video carousel that allows users to navigate through different videos using "Next" and "Prev" buttons. The current video's URL is stored in the state, so when the user clicks on either button, the stat ...

I have implemented Material UI's switch component in my multi-page app to change themes. However, I encountered a bug where the switch does not visually toggle from left to right (UI functionality is not working), even though the onChange event handler fun ...

Is there a way to properly render a ListItem component with react-router Link as the root component? Here's the code snippet in question: <ListItem to="/profile" component={Link} > Profile ...

Struggling to figure out what I'm missing here. My routing was functioning well until I switched from BrowserRouter: import { BrowserRouter as Router } from 'react-router-dom' Now, I need to navigate programmatically outside of my componen ...

Is there a way to have the Material UI react Button component behave like a Link component from react-router-dom while preserving its original style? Essentially, how can I change the route on click? import Button from '@material-ui/core/Button'; <But ...

When using the data obtained from useContext to verify if the logged-in user is an Admin, there seems to be a delay where it initially returns "undefined" and then after about 5 seconds, it provides the actual value. This causes the code to break since it ...

I'm currently attempting to pass a property from one component down to another using Link from 'react-router-dom'. The property I want to pass down is {this.props.postContent}. <Link to={{ pathname: "/posts/" + this.props.postConten ...

I am facing an issue with a function in a component that is supposed to load certain variables when the page is fully loaded. Interestingly, it works perfectly fine when manually reloading the page. However, if I use a NavLink to navigate to the page, the ...

I have a custom NavLink component that I want to style with an ".active" class when it is active. However, I am not sure how to achieve this using the "styled()" function in MUI. Does anyone know how to accomplish this? Below is the code for my custom Nav ...

I am currently working on parsing JSON data retrieved from an Ajax call in order to display it in a table using the React DataTable component. However, I have encountered a problem while trying to store the data in a state variable using the setState metho ...

I'm a beginner in the world of React and I could really use some assistance. Right now, I am working on creating a portfolio using React and focusing on the Nav component. Although I haven't encountered any errors in the Console, when I click on each Link ...

I have successfully built my React app using create-react-app and then uploaded it to GCP Storage. I configured the website settings (Main page and 404 page) to index.html. This is the current folder structure: ├── asset-manifest.json ├── fav ...

I am completely new to React and would greatly appreciate any assistance. Currently, I am working with a React Material Datagrid that lists users. My goal is to display detailed user information in another window when a row in the datagrid is clicked. I n ...

In a new project, I'm experiencing an issue where the content is not loading in despite using a similar React-Route setup that worked in a previous project. When I create a nav link in the root directory, it changes the path but the screen remains white. I ...

In the process of crafting a "dumb" component using NavLink, I am defining the props interface for this component. However, I encountered an issue when trying to include isActive in the interface. It's throwing errors. I need guidance on how to properly s ...

Exploring React for the first time and utilizing material-ui's select button feature. It displays highlighted text based on user input, but ideally this highlight should disappear upon selection of an element. https://i.stack.imgur.com/2ccaS.png However, ...

When attempting to open a component in a new tab using the Link in React router, it results in a 404 error page being displayed instead of the desired react component. The main React entry point file (js), import React from 'react'; import { render } fro ...

I'm struggling with my showNextPage function and can't figure out why it's not working as expected. The goal is for the function to update the state, generate a new array of items, and display the next project in the array when clicked. Alth ...

When using the "react-router-dom" version 5.1.2, I encountered a situation where I needed to navigate to a specific URL: http://localhost:3000/#id_token=123&expires_in=3600&token_type=Bearer To handle this navigation, I set up a Redirect component ...

In my app, I have a route called /devices where there are two devices: device1 and device2. Clicking on device1 takes me to /devices/device1 (using history.push('/device1')), and the same for device2. There is also a logo that sends me back to /d ...

Just diving into ReactJS and encountering a problem with using "Menu.Item" (from Semantic UI React) and React Router. I won't include my imports here, but rest assured they are all set up correctly. The constructor in my "App.jsx" looks like this: cons ...

class AppRoutes extends Component { render () { return ( <Suspense fallback={<Spinner/>}> <Switch> <Route exact path="/" component={ HomePage } /> <Route exact path="/acti ...

I'm encountering an issue with the <Link to=""> element in React. When I click on it, the URL changes but the view remains the same. However, upon refreshing the page, the correct component is displayed indicating that the router is functioning ...

I have been working with react-router-dom and my app.js file currently has routing set up like this: <BrowserRouter> <div className="App container"> <Header/> <Switch> <Route exact path='/& ...

I'm encountering an issue with the code snippet provided. When I try to redirect to /home and pass an email variable, the address bar displays http://localhost:4000/[email protected]. Can anyone suggest a clean way to pass variables using react and ...

Currently, I am working on developing a single-page application using React. My goal is to redirect users to another page based on the correctness of the username and password inputs. Despite trying various methods like using the

I've been trying to set up a router in Express, following a tutorial. However, my code can't seem to find the function get/users. Interestingly, it works fine when I include it in index.js index.js : const express = require('express'); const app = expre ...

I've been working on a dashboard/admin control panel application using React, but I'm facing some challenges when it comes to handling component rendering accurately. Initially, my main App component is structured like this: <React.Fragment&g ...

I have implemented React Router as shown below: <BrowserRouter> <Switch> <Route exact path="/" component={Login} /> <Route exact path="/home" component={HomeComponent}/> </Switch> </BrowserRouter> ...

Currently utilizing the React Material-UI library, I am faced with a challenge in implementing a search 'filter' on the main/parent page that should trigger a Drawer component located in a separate file. While I grasp the concept of how this fun ...

My React-Router navigation issue nav.tsx import React from 'react' import { menu } from './menu' import { Link } from 'react-router-dom' import styles from './HamburgerMenu.module.scss' const HamburgerMenu: React.F ...

Integrate React and Router v6 App.tsx: const Page1 = lazy(() => pMinDelay(import('./views/Page1'), 500)) const Page2 = lazy(() => pMinDelay(import('./views/Page2'), 500)) return ( <Suspense fallback={<Loading/>}gt; <Rout ...

I am facing an issue while trying to transfer an array retrieved from my database, from one component to another. After fetching JSON data, I need to pass it on to another component. I thought of utilizing the map method for this purpose. Upon checking my ...

Is it possible to pass props from page B back to page A when using the this.props.history.goBack() function to navigate between the two pages? ...

While working on my react application, I came across an error that I have been trying to troubleshoot without any success. It seems like I must be overlooking something important that could be quite obvious. *Error: VideoDetail.render(): A valid ReactComp ...

Greetings! I am currently working on setting up my project in React and here is my current project structure: -public --w ---dist ----bundle.js ---index.html -server --server.js -src --app.js -webpack.config.js -package.json -.babelrc For my server, I am ...

Below is a snippet of my code. I am attempting to update the state of data (which is contained within datasets) to a value defined by the user. constructor(props) { super(props); this.state={ value:'', set:[], coun ...

Having an issue with my React app that is rendered on both the client and server (Node and Express). When someone types in the URL directly, the application crashes because it cannot parse the '1' in the URL to fetch the correct product. If a link in the ...

Setting up authorization in React has been a priority for me. Ensuring that users cannot access unauthorized pages within the application is crucial. To achieve this, I have created a custom component as shown below. import { ReactNode } from "react&q ...

I am having an issue with rendering a list of posts on the index page. I can successfully create posts by clicking the 'Add Post' button and submitting the form on the /posts/new route. However, the list of posts is not showing up on the index pa ...

I'm encountering an issue on my personal website that only occurs in production, but not in my local environment. Here's the situation: I have set up the routes as follows const Routes = () => ( <Router> <Route exact path=&quo ...

In one of my projects, I've implemented a navbar with a profile icon that expands to show four different options: "Log in", "Register", "Edit", and "Admin". However, I'm facing an issue where clicking on these links doesn't always redirect me to the correc ...

When setting up a BrowserRouter in index.tsx, the following code is used: import './index.css'; import {Route, Router} from '@mui/icons-material'; import {createTheme, ThemeProvider} from '@mui/material'; import App from './App'; import {StrictMode} from ...

I have been working with the latest version of React Router (4) and have implemented a dynamic route configuration as described in the tutorial. The routes are functioning correctly, except for when I tried to add a 404 path following the tutorial's i ...

I am encountering an issue where I am unable to successfully push the id with history.push in my React application. Strangely, if I omit the id, everything works as expected. This problem is occurring while using react-router-dom version 5. useEffect(() =& ...

I've been working on my personal website and I'm facing an issue with rendering a component dynamically using React Router. Everything seems correct to me, but for some reason, it's not functioning as expected. Despite following the documentation and watc ...

I need to display certain data based on the id provided in the url. When I use console.log() with res.json, I can see the data but I'm unsure how to pass it to the 'articleComponent'. const Articles = () => { const query = (id) => ...

In my React frontend application, I am using react-router. The app is served from a directory called "/build" on my Express server. All back-end functionality (such as database operations) are handled by an endpoint at "localhost:3003/api/something", while ...

I am working on an app that contains the following code: index.js const store = createStore(rootReducers, applyMiddleware(createLogger())); store.dispatch(fetchArticles()); ReactDOM.render( <Provider store={store}> <Router> ...

I have been working on integrating Material UI makeStyles with class components, passing useStyles as props while default exporting it in an arrow function. export default () => { const classes = useStyles(); return ( <LoginClass classes={cl ...

I've been diving into the world of React Relay and GraphQL with react-relay-router, but I'm having trouble getting the params in my routes to function correctly. Specifically, I'm struggling with the "/Maps/:userID" route. Let me share my router setup: ...

Imagine having a webpage that displays search results based on the parameters in the URL, like this: https://www.someurl.com/categories/somecategory?brands=brand1,brand2,brand3 This URL will show listings for only brand1, brand2, and brand3. Additionally ...

I'm facing issues nesting a path within another path in react-router-dom version 6. When I try to visit the nested argument's page (/blog/1), it shows up as a blank non-styled HTML page. However, when I add a child path to the root like /blog, it ...

Is it possible to incorporate a sub application within my backbone application using react redux? The purpose would be to have a small number of pages, mainly to test out the concept. ...

Currently, I am in the process of developing a modular React application. However, I have encountered an issue where I am unable to dynamically import the routes for my app. Consider the following file structure: app ├── app.js └── modules ...

Currently in the process of designing a website using Material-UI's drawer component. It is functioning as intended, directing me to the correct pages when I click on the Drawer Items. However, I am looking for a way to highlight the individual Drawer ...

I am currently utilizing Material-UI's ClickAwayListener in conjunction with react-router for my application. The issue I have come across involves the callback function of the ClickAwayListener being interrupted midway to allow a useEffect to run, only to ...

Currently, I am working on adding a loading bar similar to the one used by Github. My goal is to have it start loading when a user clicks on another page and finish once the page has fully loaded. In order to achieve this, I am utilizing material-ui and t ...

I'm currently working on a web application with React and Material UI, which includes a registration form. After submitting the registration form successfully, I want to display a success message at the top of the page. To ensure consistency across m ...

I've been delving into React Router and I'm a bit puzzled about the distinction between utilizing children elements within the <Route> component (not to be confused with the children func which seems to serve a different purpose) versus usi ...

I am facing an issue where I am unable to redirect to the Home Page when I click the "Login" button during my React studies. Despite trying all possible methods for redirects, none of them seem to work. The function that is executed when I click the "logi ...

I need help with implementing a login feature on my app. The idea is that when the user clicks the login button, it should trigger a fetch request to log in with their credentials. If the login is successful, the button's value should change to redire ...

Need help with setting up 2 routes for different types of users. I already have authentication in place, but unsure how to differentiate between the two. Any suggestions or links to relevant documentation would be greatly appreciated as I've been rese ...

I have been following Tyler McGinnis' React curriculum to learn how to build a weather app. I've encountered a strange behavior that I'm having trouble debugging. It seems like I might be missing some key information or making a simple mista ...

I am facing a challenge with my React MaterialUI AppBar component. I have set the property title to dynamically change based on the value returned by window.location.pathname. However, the issue arises when a different component triggers a page/url change. ...

Issue with History.Push in Register Component App function App() { const logoutHandler = () =>{ localStorage.removeItem("authToken"); history.push("/") } const [loading, setLoading]= React.useState(true) useEffect(()=>{ ...

Having trouble rendering my Search component within the main Header component using react-router-dom. I suspect there's an issue with this line of code <Route render={({ history }) => } /> I've been stuck on this for two days now... T ...

I am new to React, especially with react-router. I came across an example on this website: . I decided to try replicating it on Codesandbox.io as well: https://codesandbox.io/s/7jxq0j6qp0 My issue is that the Menu component keeps re-rendering every time ...

I have set up a Material UI Dialog along with react-router for a sign-in feature. In the sign-in dialog, there is a link that should direct the user to the sign-up page and close the dialog simultaneously. Here's the code snippet for the sign-up link ...

I attempted to establish a connection to the websocket in React router in order to retrieve data. However, I encountered an error message Uncaught SyntaxError: Failed to construct 'WebSocket': The URL '[object Object]' is invalid. in th ...

When I navigate to a page using a link from another page (through react-router-dom), the styling of the Material UI button appears to be missing. However, if I refresh the current page, the button looks fine. ...

I've been struggling to configure nginx with react router. Despite trying various suggested solutions, none of them seem to address my specific case. Here is the directory structure on my filesystem served by nginx /path/to/my/app |- v1.0/index.html ...

Currently, I am exploring context and working with a route: /show/:id In my context, I need to access the params ID of /show/:id. To achieve this, I initialized a state to an empty string in my context and utilized useParams in /show/:id to set the id. A ...