react-router

问题 I'm working in a SPA in React that doesn't use React Router to create any Routes; I don't need to allow users to navigate to specific pages. (Think multi-page questionnaire, to be filled in sequentially.) But, when users press the back button on the browser , I don't want them to exit the whole app; I want to be able to fire a function when the user presses the back button that simply renders the page as it was before their last selection. (Each page is a component, and they're assembled in

问题 I'm migrating an AngularJS app to React little by little, and I would like to have a custom RouterLink React component that checks if react-router is in context so it can use history , and if not, falls back to usage of good old window.location . But I don't see any way of checking that in react-router 's documentation. I tried using withRouter but it throws when not in context and an ErrorBoundary doesn't seem to catch the error. Does anyone know how I could go about doing this? 回答1: There

问题 Description of problem: Changing the id (numbers only) of this url via the link tag does not update the page (but does change the url in the adress bar). Hitting refresh afterward will show the updated page. http://localhost:8080/video/id/7564 Right clicking to open the link in a new tab, or changing the link path to a completely different page works as expected. My app.js file import React from 'react' import { Router, Route, Switch } from 'react-router-dom' import RenderHomepage from '..

问题 There are a number of questions out there for "Error: Invariant failed: You should not use <Route> outside a <Router> ", but this one differs in that it only occurs when using a component from a library that returns a <Route> . My intent is to create a <GuardedRoute> component in a private library that others at my company can install using npm . This new component returns a <Route> , but checks the return value of a predicate first; if the check fails, the <Route> will point to some

问题 There are a number of questions out there for "Error: Invariant failed: You should not use <Route> outside a <Router> ", but this one differs in that it only occurs when using a component from a library that returns a <Route> . My intent is to create a <GuardedRoute> component in a private library that others at my company can install using npm . This new component returns a <Route> , but checks the return value of a predicate first; if the check fails, the <Route> will point to some

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

问题 My Routes.js <Route path="/game-center" component={GameCenter} /> <Route path="/game-center/pickAndWin" component={PickAndWin} /> <Route path="/game-center/memory" component={Memory} /> <Route path="/game-center/summary" component={GameSummary} /> </Route> </Router> On Card Click i'm routing him to the game or summary depending whther game is live or expired. cardClick=(type, name, status, gameId) => { console.log(`here${type}${status}`, name); this.props.dispatch(GameCenterActions

问题 In the React-Router documentation I have seen that It has import both Route and Router modules from react-router-dom . I would like to know what is the different between those two modules? 回答1: Router Router component is what makes the connection between browser location and the react application. It doesn't render anything visible on your page. It just exposes API to interact with location changes of the browser via React context. So any component down the tree can use this API to change

问题 Is there a way to shorten the path length when routes are passed through components in React Router? For example, in App.js : <Switch> <Route exact path="/" component={Landing} /> <Route exact path="/login" component={Login} /> <PrivateRoute path="/main" component={Main} /> <Route component={NotFound} /> </Switch> And in Main.js component: <Switch> <Route exact path="/main" component={Dashboard} /> <Route exact path="/main/users" component={Users} /> </Switch> Can I somehow omit adding /main

问题 I was trying to make a connection to the websocket and get the data in react router. The connection is not happening and getting error Uncaught SyntaxError: Failed to construct 'WebSocket': The URL '[object Object]' is invalid. in the browser console. Using npm start from the terminal to start the application. It is a simple react router application. Below is the react code where I think problem occurred. import React from 'react' export default React.createClass({ getInitialState: function()