Every time I click on a Button I want to redirect to a component I tried Link , Routes in React but its not working

So when i click on a button after first h1 tag i want to open AddProjects Component but even after using the react-router-dom it showing error i thing i am using it wrong please correct it

import React from "react";
import AddProjects from "../AddProjects/AddProjects";
import { Link } from "react-router-dom";
import {IoIosAddCircleOutline} from "react-icons/io";
import {BiChevronLeftCircle,BiChevronRightCircle} from "react-icons/bi"
import "./Projects.css"



export default function Projects() {
    return(
        <div className="Section-Projects">
            <div className="Projects-Header">
            <h1>My Projects </h1>
            <Link to='/AddProjects' ><button className="Add-newProject"><IoIosAddCircleOutline/></button></Link> 
            </div>
            <div className="Projects">
                <button className="arrowLeft"><BiChevronLeftCircle /></button>
                <div>
                <div className="Project">
                    <div className="Image">
                        <img src="./assets/Risponsive-weather-app.png" alt="Weather-app"/>
                    </div>
                    <div className="Bottom">
                        <h3>Project Name</h3>
                        <p>Discription</p>
                        <p>Date of Creation</p>
                        <a href="/">Git repository</a>
                    </div>
                </div>
                </div>
                <button className="arrowRight"><BiChevronRightCircle /></button>
                </div>
        </div>
    )
};

This is my App component
can you tell me where is the problem

    import './App.css';
import React from 'react';
import { Route , Routes} from "react-router-dom";
import AddProjects from './Hero/AddProjects/AddProjects';
// import Navbar from './Navbar/Navbar';
// import Hero from './Hero/Hero';
// import Credential from "./Hero/fillCredential/Credential"
import Projects from './Hero/Projects/Projects';
function App() {

  return (
    <div className="App">
      <Projects />
      <Routes>
          <Route path='/AddProjects' element={<AddProjects />} />
      </Routes>
    </div>

  );
}

export default App;

>Solution :

i think you did not use BrowserRouter in your code try this:

import './App.css';
import React from 'react';
import { Route , Routes,BrowserRouter} from "react-router-dom";
import AddProjects from './Hero/AddProjects/AddProjects';
// import Navbar from './Navbar/Navbar';
// import Hero from './Hero/Hero';
// import Credential from "./Hero/fillCredential/Credential"
import Projects from './Hero/Projects/Projects';
function App() {

  return (
    <BrowserRouter>
      <div className="App">
       <Projects />
       <Routes>
            <Route path='/AddProjects' element={<AddProjects />} />
       </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;