The useEffect is not triggered because the App component is not re-rendered, nothing changed in that component (no state or props update). If you want the App component to re-render when the route change, you can use the withRouter HOC to inject route props, like this : import { Switch, Route, withRouter } from ‘react-router-dom’; … Read more
Dynamic Routing From the react router docs: When we say dynamic routing, we mean routing that takes place as your app is rendering, not in a configuration or convention outside of a running app. Think of routes as components The earlier versions of react-router (pre v4) used to have static routes. This led to a … Read more
The “nextCreate is not a function” error is thrown when you’re not passing a function as a useMemo() argument. For example, useMemo(123, []) will throw and useMemo(() => 123, []) won’t.
The router history works like a stack of routes. When you use the router.replace, you’re overwritting the top of the the stack. When using the router.push, it adds a new route to the top of the stack. The router history allows you to go back to the last page. For example, when the user navigates … Read more
You need to use different history provider for server side rendering because you don’t have a real DOM (and browser’s history) on server. So replacing BrowserRouter with Router and an alternate history provider in your app.js can resolve the issue. Also you don’t have to use two wrappers. You are using BrowserRouter twice, in app.js … Read more
You can wrap your component in the test with the StaticRouter to get the router context into your component: import React from ‘react’; import renderer from ‘react-test-renderer’; import { Link } from ‘react-router-dom’; import { StaticRouter } from ‘react-router’ test(‘Link matches snapshot’, () => { const component = renderer.create( <StaticRouter location=”someLocation” context={context}> <Link to=”#” /> … Read more
I do not think it has anything to do with webpack-config. Here is a basic github repository using react-router-4.0. I have created this example without any specific changes related to react-router-4.0 in webpack config. Add ‘devServer’ in your webpack config if not already: devServer: { historyApiFallback: true, } Two small suggestions in your code, try … Read more
Along with componentDidMount, You also need to implement the componentWillReceiveProps or use getDerivedStateFromProps(from v16.3.0 onwards) in Products page since the same component is re-rendered with updated params and not re-mounted when you change the route params, this is because params are passed as props to the component and on props change, React components re-render and … Read more
I would go through your components and make sure you have only one <Router> … </Router>. Also — make sure you have a <Router>…</Router> There may be cases when you’d use more than one, but if you accidentally have nested routers (because you were hacking quickly and forgot to remove one when you were moving … Read more
The asker posted an issue on GitHub, and got this apparently unpublished hidden guide (edit: now published) that helped me out too. I’m posting it here because I ran into the same problem and want others to avoid our pain. The problem is that mobx-react and react-redux both supply their own shouldComponentUpdate() functions that only … Read more