I was including my component library (for that matter any library) in my application as @Janith did using my-comp-lib:”file:../..” (I don’t want to publish every time I want to test) and I encountered the same issue. Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen … Read more
I had the same issue. I fixed it by downgrading react-router and react-router-dom to version 5.2.0. Just run npm install react-router-dom@5.2.0 and npm install react-router@5.2.0. This should fix the issue with withRouter().
Looks like you already assumed correct. The ability to parse query strings was taken out of V4 because there have been requests over the years to support different implementation. With that, the team decided it would be best for users to decide what that implementation looks like. We recommend importing a query string lib. The … Read more
react router v6 doesn’t support exact anymore. // old – v5 <Route exact path=”/” component={Home} /> // new – v6 <Route path=”/” element={<Home />} /> As stated in their documentation: You don’t need to use an exact prop on <Route path=”/”> anymore. This is because all paths match exactly by default. If you want to … Read more
In react-router-dom v6, you need to use useNavigate rather than useHistory. See example from https://reacttraining.com/blog/react-router-v6-pre/ import React from ‘react’; import { useNavigate } from ‘react-router-dom’; function App() { let navigate = useNavigate(); let [error, setError] = React.useState(null); async function handleSubmit(event) { event.preventDefault(); let result = await submitForm(event.target); if (result.error) { setError(result.error); } else { navigate(‘success’); … Read more
Well, it turns out you can duplicate the behavior if you implement a custom router that instantiates the history state in the same manner as RRDv6 routers. Examine the BrowserRouter implementation for example: export function BrowserRouter({ basename, children, window }: BrowserRouterProps) { let historyRef = React.useRef<BrowserHistory>(); if (historyRef.current == null) { historyRef.current = createBrowserHistory({ window … Read more
This error throws in useNavigate. useInRouterContext will check if the component(which uses useNavigate hook) is a descendant of a <Router>. If the component is not a descendant of the <Router> component, it will throw this error. Here’s the source code to explain why you can’t use useNavigate, useLocation outside of the Router component: useNavigate uses … Read more
<Switch> returns only one first matching route. exact returns any number of routes that match exactly. For example: <Switch> <Route exact path=”/animals” component={Animals} /> <Route path=”/animals/fish” component={Fish} /> <Route component={Missing} /> </Switch> <Route path=”/animals” component={Order} /> If the Missing component was not inside a <Switch>, it would be returned on every single route. With exact, … Read more
Use jest.mock in module scope will automatically be hoisted to the top of the code block. So that you can get the mocked version react-router-dom in NotFound.jsx file and your test file. Besides, we only want to mock useHistory hook, so we should use jest.requireActual() to get the original module and keep other methods as … Read more
import {withRouter} from ‘react-router-dom’; … class App extends React.Component { … nextPath(path) { this.props.history.push(path); } render() { return ( <button onClick={() => this.nextPath(‘/the/path’) }> change path </button> ); } } export default withRouter(App);