react-router-dom

问题 I create a react library using https://www.npmjs.com/package/create-react-library And successfully used it on other React project. But when I tried to use react hooks functionalities inside library it gives me following error. Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3

问题 I'm using react-router-dom for my routing and, since I'm also using GitHub Pages, I need to use HashRouter in my Router.jsx like so import React from 'react'; import { HashRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home'; import Customer from './Customer'; const MyRouter = () => ( <Router> <Switch> <Route path="/customer" component={Customer} /> <Route path="/" component={Home} /> </Switch> </Router> ); export default MyRouter; In my Home.jsx component I

问题 So I've read similar questions but answers were too complex for my understanding. I have not set up a back-end, I just use create-react-app and install react-router-dom, and while my websites can refresh on my localhost, when I upload them on internet, if I refresh any page except the home page, they give a 404 not found page error. these are the versions of my installed programs: "react": "^16.6.3", "react-dom": "^16.6.3", "react-router-dom": "^4.3.1", "react-scripts": "2.1.1" <BrowserRouter

问题 After I receive a 200 status code, I try to go to the dashboard page. However, it does not work as intended. I am using React Context and ProtectedRoute. When I get the successful response, I call the login() function and it makes isAuthenticated as true but still does not take me to the dashboard Page. PS: I checked and saw that in my protected route, it goes to the second part and gets redirected to "/" and hence I am on the same page. Do not know why that is happening Signin import {

问题 I am trying to mock history.push inside the new useHistory hook on react-router and using @testing-library/react . I just mocked the module like the first answer here: How to test components using new react router hooks? So I am doing: //NotFound.js import * as React from 'react'; import { useHistory } from 'react-router-dom'; const RouteNotFound = () => { const history = useHistory(); return ( <div> <button onClick={() => history.push('/help')} /> </div> ); }; export default RouteNotFound; /

问题 I am trying to mock history.push inside the new useHistory hook on react-router and using @testing-library/react . I just mocked the module like the first answer here: How to test components using new react router hooks? So I am doing: //NotFound.js import * as React from 'react'; import { useHistory } from 'react-router-dom'; const RouteNotFound = () => { const history = useHistory(); return ( <div> <button onClick={() => history.push('/help')} /> </div> ); }; export default RouteNotFound; /

问题 I am trying to understand the difference between BrowserRouter and Router of the react-router-dom (v5) package and what difference it makes for my example below. The documentation says: BrowserRouter A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL. Source: https://reacttraining.com/react-router/web/api/BrowserRouter Router The common low-level interface for all router components. Typically apps will use one of the high

问题 I am trying to understand the difference between BrowserRouter and Router of the react-router-dom (v5) package and what difference it makes for my example below. The documentation says: BrowserRouter A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL. Source: https://reacttraining.com/react-router/web/api/BrowserRouter Router The common low-level interface for all router components. Typically apps will use one of the high

问题 I am trying to understand the difference between BrowserRouter and Router of the react-router-dom (v5) package and what difference it makes for my example below. The documentation says: BrowserRouter A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL. Source: https://reacttraining.com/react-router/web/api/BrowserRouter Router The common low-level interface for all router components. Typically apps will use one of the high

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