react-router-dom

问题 I am using the new useHistory hook of React Router, which came out a few weeks ago. My React-router version is 5.1.2. My React is at version 16.10.1. You can find my code at the bottom. Yet when I import the new useHistory from react-router, I get this error: Uncaught TypeError: Cannot read property 'history' of undefined which is caused by this line in React-router function useHistory() { if (process.env.NODE_ENV !== "production") { !(typeof useContext === "function") ? process.env.NODE_ENV

问题 Is it possible to apply logic to a component before navigating to a different route? For example, my component looks something like this: class Example extends React.Component { //Handles logic for when user leaves page handlePageExit = () => { console.log("Leaving page..."); } //Set onBeforeUnload event listener so handlePageExit function is called when user closes or refreshes page componentDidMount = () => { window.addEventListener("onbeforeunload", this.handlePageExit); } //This hook is

问题 I have two doubts regarding usage of Route from react-router-dom ( v4.3.1 ): When do we use component vs render in Route : <Route exact path='/u/:username/' component={ProfileComponent} /> <Route exact path='/u/:username/' render={() => <ProfileComponent />} /> How to access the variable username in the URL in both ways? 回答1: When you pass a component to the component prop, the component will get the path parameters in the props.match.params object, i.e props.match.params.username in your

问题 I think I have a quite common problem, but can't find up to date answer that I would be sure is good practice. I'm writing a forum app using React, Redux, React Router DOM. I'm using BrowserRouter. Here is what I want to do: after I post a request to create a thread and it is fulfilled, I want to redirect user to newly created thread page (I need object id that I will get in response for URL). component class CreateThread extends React.Component { handleCreateThread = (values) => { this.props

问题 I have the following Router definition: <Router> <Route exact path='/' component={Home}/> <Route path='/about' component={About}/> <Route path='/code' component={Code}/> </Router> I want any unmapped route (i.e /foo ) to redirect back to root / . I tried <Redirect .../> without success. Also adding a <Route /> without a path= resulted in a duplicated component on each page. 回答1: Just place a redirect at the bottom like this and wrap your routes with Switch : <Router> <Switch> <Route exact

问题 I have designed a management panel in React with a sidebar and a top menu. when you click on any links on the sidebar, a component needs to be shown under the top menu. But even though the router links work correctly (they change the URL and they show the single component when I load the router link separately), they don't show anything under the top menu and next to the sidebar when I click on the sidebar links. what seems to be the problem? Edit: the github link of the project, its actually

问题 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

问题 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'm working on react-router-dom and in console this error is appearing. Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack 回答1: Basically, the problem is that if you are on page /here and click a link to /here , you end up with essentially duplicate (just different keys) location objects. Please confirm that your pushing the different paths in <Link to='/diff'/> checkout this link for more reference: https://github.com/ReactTraining/react

问题 I'm working on react-router-dom and in console this error is appearing. Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack 回答1: Basically, the problem is that if you are on page /here and click a link to /here , you end up with essentially duplicate (just different keys) location objects. Please confirm that your pushing the different paths in <Link to='/diff'/> checkout this link for more reference: https://github.com/ReactTraining/react