react-router

问题 I have a login page. If login is successful and token is present in local storage, I want to redirect to a private page /panel. I am calling all functions on the onSubmit() of my form. Here's what my code looks like: function LoginPage (){ const [state, setState] = useState({ email: '', password: '', }); const [submitted, setSubmitted] = useState(false); function ShowError(){ if (!localStorage.getItem('token')) { console.log('Login Not Successful'); } } function FormSubmitted(){ setSubmitted

问题 I have the following Alignments.js react component using the new useState and useEffect React hooks, which works great by the way. It displays a list of alignments: import React, {useState, useEffect} from 'react'; import './App.css'; import {Link} from 'react-router-dom'; function Alignments() { useEffect(() => { fetchItems(); },[]); const [items, setItems] = useState([]); const fetchItems = async () => { const data = await fetch('http://localhost:3001/alignments'); const items = await data

问题 I am having an issue when deploying my React application to Firebase. The "/" route returns a blank page as shown here: The "/play" route is working when deployed. The application works locally, and this old post is very similar. I think the problem is related to how the Routing is set up. Index.json: import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import * as serviceWorker from "./serviceWorker"; import "bootstrap/dist/css/bootstrap.min.css"; import "font

问题 I'm writing client side code for authentication with React and react-router. In the code below, I want to check jwt token on the server. After that, I'll get response.data.access from server and I want to set it to access variable on client. But it seems it passes false to the protected route even if it logs true in the console. How can I set access properly? I guess the problem is in asynchronous code, and setAccess function is called without waiting for axios to fetch. // imports function

问题 I'm building a React app where I do NOT want the URL in the browser to be updated. I am NOT using 'react-router-dom' but only 'react-router' and MemoryRouter (https://reacttraining.com/react-router/web/api/MemoryRouter). The history.push() is available directly in the component statements but I wish to pass the history to children of children of these main components but the property is undefined. Here is the Router section in main App.js (components Home and ScreeningTool can access this

问题 In one component, there is a <Link> (from react-router-dom) passing an object in the state property. Another component called ReceiverComponent is receiving that object correctly. However, the code belows complains with the message: Type 'PoorMansUnknown' is not assignable to type 'locationStateProps'. Type 'undefined' is not assignable to type 'locationStateProps'.ts(2322) type locationStateProps = { name: string; } function ReceiverComponent() { const location = useLocation(); const myState

问题 I have a normal route function LoginPage(props: RouteComponentProps): React.ReactElement {... } that uses RouteComponentProps from react-router-dom . Strangely there were no issues for a long time with this component, but now it is failing to compile on travis-ci when I use history.push(location.state.from.pathname) saying Property 'from' does not exist on type '{}'. I set this state in my PrivateRoute component that is pretty standard with a Redirect <Redirect to={{ pathname: '/login', state

问题 This question already has answers here : CloudFront + S3 Website: “The specified key does not exist” when an implicit index document should be displayed (5 answers) Closed 2 years ago . I have a React app that runs on AWS S3 and CloudFront. When I access the app from the given URL it opens the home page fine. When I navigate to another page using a button on the nav bar it opens the page just fine. But if I then refresh the page I get this error: I also get that same error if I attempt to

问题 I'm new to using ReactJS and react-router. I want a clickable table row and something like the following setup: <Link to=“#”> <tr> <td>{this.props.whatever1}</td> <td>{this.props.whatever2}</td> <td>{this.props.whatever3}</td> </tr> </Link> but I know you can't put <a> tags between the <tbody> and <tr> tags. How else can I accomplish this? PS: I prefer not to use jQuery if possible. 回答1: Why don't you just use onClick? var ReactTable = React.createClass({ handleClick: function(e) { this

问题 I have the following scenario: A user opens an activation link; after the user has completed the activation process, the system will move them to another page. I don't want to keep the activation link in the browser's history because when the the user goes back they will get to the activation step again. How do I replace the history of a browser to remove certain requests from my application? 回答1: In reactJS you should use browserHistory for this purpose. This takes care of you histories and