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
I got the above error message and it was extremely cryptic. I tried the other solutions mentioned and it didn’t work. Turns out I accidentally forgot to include the to prop in one of the <Link /> components. Wish the error message was better. A simple required prop “to” not found or something like that … Read more
There is a video tutorial for deploying react app to s3. This will be easy for deploying the app as such on s3 but we need to do some changes in our react app. Since it is difficult to follow, I am summarising as steps. Here it goes: Amazon AWS -> s3 -> create bucket. … Read more
I think you don’t need to. (Sorry for a dismissive answer but it’s the best solution in my experience.) Store is the source of truth for your data. This is fine. If you use React Router, let it be the source of truth for your URL state. You don’t have to keep everything in the … Read more
Problem: URL gets evaluated on server side When you enter a new URL into address bar of the browser or refreshes the page, browser requests server (in this case GitHub pages server) for that URL. At this point, client side router (react-router) can’t take action as it is not yet loaded for that page. Now … Read more
You can make use of history.listen() function when trying to detect the route change. Considering you are using react-router v4, wrap your component with withRouter HOC to get access to the history prop. history.listen() returns an unlisten function. You’d use this to unregister from listening. You can configure your routes like index.js ReactDOM.render( <BrowserRouter> <AppContainer> … Read more
but classes are so 2018 ScrollToTop implementation with React Hooks ScrollToTop.js import { useEffect } from ‘react’; import { withRouter } from ‘react-router-dom’; function ScrollToTop({ history }) { useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); } }, []); return (null); } export default withRouter(ScrollToTop); Usage: … Read more