[email protected]+ Optional segments/parameters have been re-introduced to the library. The docs have been updated, but v6.5.0 Release Notes include the details as well. The above routes can be merged to a single route: <Route path=”/cart/:id?” element={<CartPage />} /> [email protected] After quite a bit of digging through the source code to understand how path parsing was … 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
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 had the same problem and I believe the problem started with the Chrome 49.0.2623.87. I hope it is going to be fixed in the coming updates. For now, I am using the script below, which can be found here. var favIcon = “favicon.ico”; var docHead = document.getElementsByTagName(‘head’)[0]; var newLink = document.createElement(‘link’); newLink.rel=”shortcut icon”; newLink.href=”data:image/png;base64,”+favIcon; … Read more
Wanted to update this thread because I spent a good amount of time digging around on this. In React Router 2.0.x, replaceState is deprecated in favor of replace. See here for details: https://github.com/ReactTraining/react-router/blob/v2.0.0/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors The correct way to do this would be something like this: function requireAuth(nextState, replace) { if (!userExists()) { replace({ pathname: ‘/signin’, state: … Read more
If I understand your question about a “default” route correctly then I am interpreting this as one of the following: Use an index route: You can wrap a set of routes in a layout route and specify an index route: <Routes> <Route path=”/*”> <Route index element={<ComponentA />} /> <Route path=”pathB” element={<ComponentB />} /> <Route path=”pathC” … Read more
react-router v4 also provides a way to share history via the history package, namely createBrowserHistory() function. The important part is to make sure that the same history object is shared across your app. To do that you can take advantage of the fact that node modules are singletons. Create a file called history.js in your … 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 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
Adding an Api Call in a focus callBack in the screen you’re returning to solves the issue. componentDidMount() { this.props.fetchData(); this.willFocusSubscription = this.props.navigation.addListener( ‘willFocus’, () => { this.props.fetchData(); } ); } componentWillUnmount() { this.willFocusSubscription.remove(); } UPDATE 2023: willFocus event was renamed to focus componentDidMount() { this.props.fetchData(); this.focusSubscription = this.props.navigation.addListener( ‘focus’, () => { this.props.fetchData(); } … Read more