briancodex / react-navbar-v3 Goto Github PK

In the video, you utilized:

<Switch>
        <Route path='/' exact component={Home} />
        <Route path='/about' component={About} />
        <Route path='/services' component={Services} />
        <Route path='/contact-us' component={Contact} />
        <Route path='/sign-up' component={SignUp} />
      </Switch>

But I got some errors when compiling it: Attempted import error: 'Switch' is not exported from 'react-router-dom'

After investigating a little bit, I found that since v6 of react-router-dom, Switch is replaced by Routes, making this change on my project solved the issue:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
...
<Routes>
        <Route path='/' element={<Home/>} />
        <Route path='/about' element={<About/>} />
      </Routes>

I think it would be nice if you pinned a comment on the video or to update it.
Thanks for the tutorial.

Fix correction:

1 - in package.json

Change start script to: "start": "react-scripts --openssl-legacy-provider start"

2 - Enable legacy OpenSSL provider.

On Unix-like (Linux, macOS, Git bash, etc.):

export NODE_OPTIONS=--openssl-legacy-provider
On Windows command prompt:

set NODE_OPTIONS=--openssl-legacy-provider
On PowerShell:

$env:NODE_OPTIONS = "--openssl-legacy-provider"

This repo is missing react-router-dom dependency in package.json

Probably just a typo.

Simply run:

yarn add react-router-dom

Cheers!

all code i do with ur youtube video but cant display any navbar in a browser.what is the problem why its not show the output can u help me out?

Just to let others (apprentices like me) know about that change. Here is the reference so you can solve that problem. Thank you very much for your video, I have learned a lot. https://stackoverflow.com/questions/69854011/matched-leaf-route-at-location-does-not-have-an-element