{"id":2858,"date":"2020-04-25T15:29:22","date_gmt":"2020-04-25T14:29:22","guid":{"rendered":"https:\/\/www.dpscomputing.com\/blog\/?p=2858"},"modified":"2021-03-01T21:24:22","modified_gmt":"2021-03-01T21:24:22","slug":"react-router-url-changes-component-doesnt","status":"publish","type":"post","link":"https:\/\/www.dpscomputing.com\/blog\/2020\/04\/25\/react-router-url-changes-component-doesnt\/","title":{"rendered":"React Router &#8211; URL Changes, Component Doesn&#8217;t"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"alignright size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"168\" data-attachment-id=\"2859\" data-permalink=\"https:\/\/www.dpscomputing.com\/blog\/2020\/04\/25\/react-router-url-changes-component-doesnt\/image-4-9\/\" data-orig-file=\"https:\/\/www.dpscomputing.com\/blog\/wp-content\/uploads\/2020\/04\/image-4.png\" data-orig-size=\"299,168\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"React logo\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/www.dpscomputing.com\/blog\/wp-content\/uploads\/2020\/04\/image-4.png\" data-large-file=\"https:\/\/www.dpscomputing.com\/blog\/wp-content\/uploads\/2020\/04\/image-4.png\" tabindex=\"0\" role=\"button\" src=\"https:\/\/www.dpscomputing.com\/blog\/wp-content\/uploads\/2020\/04\/image-4.png\" alt=\"React logo\" class=\"wp-image-2859\" srcset=\"https:\/\/www.dpscomputing.com\/blog\/wp-content\/uploads\/2020\/04\/image-4.png 299w, https:\/\/www.dpscomputing.com\/blog\/wp-content\/uploads\/2020\/04\/image-4-150x84.png 150w\" sizes=\"auto, (max-width: 299px) 100vw, 299px\" \/><\/figure><\/div>\n\n\n\n<p>There&#8217;s nothing more frustrating when something just doesn&#8217;t work.  And coding is no exception.  <\/p>\n\n\n\n<p>You&#8217;re searching high and low, your Link component is fine, and you&#8217;ve been through your code a million times.  <\/p>\n\n\n\n<p>The address bar in your browser updates to your new URL, the your component doesn&#8217;t change &#8211; and stubbornly remains glued to the screen.  <\/p>\n\n\n\n<p>This a common case for many React developers who have a potentially troublesome combination of:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Using Redux connect<\/li><li><strong>Not<\/strong> using a route component &#8211; i.e. component={ReactComponent}<\/li><\/ul>\n\n\n\n<p>Fortunately though, there&#8217;s an easy fix.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">In Enters, withRouter<\/h2>\n\n\n\n<p>Given the conditions above, Redux and React Router often don&#8217;t play nicely together.  I won&#8217;t bore you with the detail here (as I realise at this stage you&#8217;ve probably already tore half your hair out!) but just trust me on this one.  <\/p>\n\n\n\n<p>The solution however is simple.  We need to treat all of our non-route component with corresponding export connects.  <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Extend your import statement for react-router-dom to include &#8216;withRouter&#8217;.  <\/li><\/ol>\n\n\n\n<p>Code before:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Route, Link } from 'react-router-dom';<\/code><\/pre>\n\n\n\n<p>Code after:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Route, Link, withRouter } from 'react-router-dom';<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Surround your export with &#8216;withRouter&#8217;.  <\/li><\/ol>\n\n\n\n<p>Code before:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default connect(mapStateToProps)(AppDisplay);<\/code><\/pre>\n\n\n\n<p>Code after:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default withRouter(connect(mapStateToProps)(AppDisplay));<\/code><\/pre>\n\n\n\n<p>Rinse and repeat for all connected components and voil\u00e1, your app routes correctly, your components load and your zen is restored.  <\/p>\n\n\n\n<p>Shout out to us in the comments section below if we&#8217;ve just saved your sanity!  You&#8217;re welcome!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There&#8217;s nothing more frustrating when something just doesn&#8217;t work. And coding is no exception. You&#8217;re searching high and low, your Link component is fine, and you&#8217;ve been through your code a million times. The&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":2859,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"#React Router - URL Changes, Component Doesn't\n\nEnd your frustration, we've got the easiest solution ever!\n\n#Development #WebsiteDevelopment #ReactRouter #DevelopmentIssues #TechHelp #WebDevelopment","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[2139],"tags":[2695,2675,2699,2696,2697,2700,2698],"class_list":["post-2858","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-issues","tag-react","tag-react-development","tag-react-route-page-does-not-appear","tag-react-router","tag-react-router-not-working","tag-react-router-only-url-changes","tag-react-router-page-does-not-change"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.dpscomputing.com\/blog\/wp-content\/uploads\/2020\/04\/image-4.png","jetpack_shortlink":"https:\/\/wp.me\/p3nsfA-K6","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/2858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/comments?post=2858"}],"version-history":[{"count":2,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/2858\/revisions"}],"predecessor-version":[{"id":2997,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/2858\/revisions\/2997"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/media\/2859"}],"wp:attachment":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/media?parent=2858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/categories?post=2858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/tags?post=2858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}