I don’t know why you absolutly want a stateless component, while a stateful component with componentDidMount would do the job in a simple way. Dispatching actions in mapDispatchToProps is very dangerous and may lead to dispatching not only on mount but whenever ownProps or store props changes. Side effects are not expected to be done … 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
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
Redirect Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do. whereas History push function Pushes a new entry onto the history stack
I use a different approach to fix this. I always separate the different properties (router, regular and dispatch), so I define the following interfaces for my component: interface HomeRouterProps { title: string; // This one is coming from the router } interface HomeProps extends RouteComponentProps<HomeRouterProps> { // Add your regular properties here } interface HomeDispatchProps … 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
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
I would suggest just using React Router directly and not keeping searchState in Redux. React Router will inject URL parameters into your components, and you can use them in mapStateToProps(state, ownProps) to calculate the final props. If you really want to see route changes as actions, you can use react-router-redux for two-way syncing, but it … 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