{"id":107,"date":"2021-12-29T14:58:54","date_gmt":"2021-12-29T14:58:54","guid":{"rendered":"http:\/\/frontendguruji.com\/?p=107"},"modified":"2021-12-30T11:07:48","modified_gmt":"2021-12-30T11:07:48","slug":"warn-export-switch-imported-as-switch-was-not-found-in-react-router-dom","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/warn-export-switch-imported-as-switch-was-not-found-in-react-router-dom\/","title":{"rendered":"WARN export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’"},"content":{"rendered":"\n

Hello Friends 🙏, today I was setting up a new React project from scratch without using create-react-app<\/a> and after doing all the required steps when I compiled the React App, I got below warning😮:<\/p>\n\n\n\n

\"\"
export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ <\/span><\/figcaption><\/figure>\n\n\n\n

So basically it is complaining for the Switch<\/strong> here, below is the code:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Then I did a search on this error and found that in it is due to changes in the v6 of react-router<\/strong>. Then I went to their documentation <\/a>and found out that now Switch is replaced by Routers<\/em>. And there are many different changes, you can go through the documentation once if you are using v6 of the react-router.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

So I made the change and App started compiling without any warning 🥳.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

But now when I went to the browser, I got surprised to see that nothing is rendering 😮.<\/p>\n\n\n\n

Then again I went to the documentation and found out that way of writing Route is also changed in v6 😥<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Again did the changes and now all is working fine 😅🥳🥳<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Thanks 🙏.<\/p>\n","protected":false},"excerpt":{"rendered":"

Hello Friends 🙏, today I was setting up a new React project from scratch without using create-react-app and after doing all the required steps when I compiled the React App, I got below warning😮: So basically it is complaining for the Switch here, below is the code: Then I did a search on this error …<\/p>\n

WARN export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[30],"tags":[12,31,13,34,32],"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/107"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":0,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}