React native using link tag not showing result

Hi all i am trying to create some link to show up on navigation bar in react in web browser, however, after i import link and put in the tag the page is not showing anything, can i know if i am missing anything?

In the following i have 2 classes, the nav bar and app.js for now. i tried to key in the route manually and looks like it works. It only doesnt show once i enter the tag in my navapp.js

Nav bar.js

> > import React from 'react'; import {Link} from 'react-router-dom'; import logo from '../images/logo.png';
> > 
> > const Navbar =() =>{
> >     return(
> >         <div className = "navbar">
> >             <nav className="nav">
> >                 <div className="logoBtn">
> > 
> >                 <Link to  ='/'> <p>link 1</p></Link>
> > 
> >                 <img src={logo} alt="logo" />
> > 
> > 
> >             
> >          
> >                    
> >                    
> >             
> >                 </div>
> >             </nav>
> > 
> >       
> >           
> > 
> >         </div>
> >         
> >     ) }
> > 
> > export default Navbar

Routes App.js

import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import NavBar from './components/Navbar'
import Cart from './components/Cart';
import Products from './components/Product';
import Details from './components/Details';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contacts';

function App() {
  return (
    <div className="App">

    
    {/* nav bar */}
      <NavBar />


      <Router>
        <Routes>
            <Route exact path="/" element={<Home/>}/>
            <Route exact path="/about" element={<About/>}/>
            <Route exact path="/cart" element={<Cart/>}/>
            <Route exact path="/products" element={<Products/>}/>
            <Route exact path="/details" element={<Details/>}/>
            <Route exact path="/contact" element={<Contact/>}/>
        </Routes>



       </Router>
    


  
    </div>
  );
}


export default App;