Why are my Links and NavLinks not working?-CodePudding

I'm trying to use react-router and for some reason I'm having the following warning:

The href attribute requires a valid value to be accessible.

This is my App.js component:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar';
import Home from './components/Home';
import Contact from './components/Contact';
import About from './components/About';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />
        <Routes>
          <Route exact path='/' element={<Home/>}/>
          <Route path='about' element={<About/>}/>
          <Route path='contact' element={<Contact/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

And this is my Navbar.js component:

import React from 'react'
import {Link, NavLink} from 'react-router-dom';

const Navbar = () => {
  return (
    <nav className='ui raised very padded segment'>
      <a className='ui teal inverted segment' href="">Mateo</a>
      <div className='ui right floated header'>
        <button className='ui button'>
          <Link to="/"></Link>
          Home
        </button>
        <button className='ui button'>
          <NavLink to="/About"></NavLink>
          About
        </button>
        <button className='ui button'>
          <NavLink to="/contact"></NavLink>
          Contact
        </button>
      </div>
    </nav>
  )
}

export default Navbar

For some reasons my links aren't changing my url when I click on the different buttons. But if I change my URL manually the content of my page changes accordingly to the url I inserted manually.

CodePudding user response：

In Your NavBar Component Always write between the navLinks otherwise Link won't work.. see in CodeSandBox

import React from 'react'

import {Link, NavLink} from 'react-router-dom';

const Navbar = () => {
  return (
    
        <nav className='ui raised very padded segment'>
            <a className='ui teal inverted segment' href="">Mateo</a>
            <div className='ui right floated header'>
                <button className='ui button'><Link to="/">Home</Link></button>
                <button className='ui button'><NavLink to="/About">About</NavLink></button>
                <button className='ui button'><NavLink to="/contact">Contact</NavLink></button>
            </div>
        </nav>
    
  )
}

export default Navbar;