react-router

问题 I have a reactJs app which is running on a server that has nginx on it. The problem is that when I try to redirect from HomePage("/") to /UserPanel or /AdminPanel the url changes but it shows an empty page, but then when i reload the page, it works just fine. This problem doesn't occur in my localhost, but it happens to the production build. this is my nginx config: listen 80 default_server; listen [::]:80 default_server; root /var/app/html; index index.html index.htm; location / { try_files

问题 I have a route which takes an id and renders the same component for every id, for example : <Route path='/:code' component={Card}/> Now the in the Link tag I pass in an id to the component.Now the Card component fetches additional detail based on the id passed. But the problem is it renders only for one id and is not updating if I click back and goto the next id. I searched and found out that componentsWillReceiveProps can be used but during recent versions of React it has been deprecated. So

问题 I have a app which has the Following Components |__Base - /home/Base |__Try - /home/Base/:try |__Report - /home/Base/:try/report Base is the Starting screen where the user hits a button and clicks on Try and after trying some things he hits submits which generates reports which has some back end interactions and when the data is fetched it loads the Reports. So what i want is when the user hits the back button from the Reports Page he should not land on the Try page but on the Base page . For

问题 I have a page with ID, if I go to the same page through the Link https://localhost:8443/news/10 with another ID the page does not update props and state, and the page looks exactly the same as it was before you refresh it. I think this is because I do not change the state and props in the redux. NewsPageItem import React, { useEffect } from 'react'; import { Link, useHistory } from 'react-router-dom'; import Comments from './../shared/Comments/Comments'; import Container from 'common

问题 I've tried to make my first app in React and I think I've made some serious error in the flow of the Application however trying to save it doesn't make it better. I got my App.ksin which I have <LatestRecipes latestRecipes={this.state.latestRecipes} allRecipes={this.state.recipes} addComment={this.addComment}/> Right now AddComment is only: addComment(key, commentData) { console.log(key); console.log(commentData); } And in latest Recipe I have: <Link to={{pathname: '/recipe/' + recipe.name,

问题 I have seen multiple threads that suggest the use of Routes on redux, but in general, the examples contain a public Main Page with the options to Log in, Logout, Access to Dashboard, etc. What I'm looking for is to allow the user to access the app if the token is still valid, otherwise, it should redirect to the Login page, which is not part of the main layout of the app. Let me show some code: function checkAuth() { const token = localStorage.getItem('token'); if (!token) { return false; }

问题 I am working on Dashboard design using React material-ui package. I have an App bar and a Drawer with a List of different items. When I click items in Drawer, I want to render the respective component inside the " main " tag of Drawer. The App.js component is class-based. And I have functional component for all other routes and features. import React, { useState } from "react"; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { Link } from 'react-router-dom' import {

问题 I've tried to make my first app in React and I think I've made some serious error in the flow of the Application however trying to save it doesn't make it better. I got my App.ksin which I have <LatestRecipes latestRecipes={this.state.latestRecipes} allRecipes={this.state.recipes} addComment={this.addComment}/> Right now AddComment is only: addComment(key, commentData) { console.log(key); console.log(commentData); } And in latest Recipe I have: <Link to={{pathname: '/recipe/' + recipe.name,

问题 I have IIS web server, and I am using the IP address and :80 port to serve the website. I have two applications. One of them should be served on '/' route, and another one should be accessible on '/admin' route. I tried multiple advices about "how to serve two websites on one IP and Port", but they do not help me. I also created virtual directory with static files, but still cannot access the second app on '/admin' route Can you please give me recommendations what do I need to add to "web

问题 I have a NavBar that has a Logo on it, that contains a Link to the Home page "/" . The application starts from the main page and then its UI will start changing based on user's choices. I want to give the user a chance to reset everything if he is still in the Home component and clicks the Logo . App.js ... import Home from './views/Home'; import Navbar from './components/navbar/Navbar'; ... render() { return ( <div> <Navbar /> <main ref={(element) => { this.mainElement = element; }}> <Switch