I'm new to react I'm using react-router ^6.0.2 and my problem is I created a component for the router then I called this component in the index file but when I add another component to the index it gets rendered in all the routes with the navbar in every single route I want the navbar to be rendered in all components but not the other component in the index file sorry for my bad English

index file:

import React from "react";
import  ReactDOM  from "react-dom";
import "../src/css/style.css";
import Router from "./Components/Router";

const App =()=>{ 
return(
    <div> 

 <Router/>  {/* i want this to get renderd in all routes */}
 <Test/> {/*i want this to get renderd only in home page  */}

</div>

)
}

ReactDOM.render(<App/>,document.getElementById("root"));

router component :

import { Component } from "react";
import  ReactDOM  from "react-dom";
import { BrowserRouter,  Routes, Route}  from "react-router-dom";
import NavBar from "./NavBar";
import About from "./About";
import Product from "./Product"
import Sp from "./Sp"
import Contact from "./Contact"






 class Router extends Component{
render(){
    return(

        <BrowserRouter>

        <NavBar/>
       <Routes>
       <Route path="about" element={<About/>}/>
       <Route path="product" element={<Product/>}/>
       <Route path="sp" element={<Sp/>}/>
       <Route path="contact" element={<Contact/>}/>
       </Routes>
       
       </BrowserRouter>
    )
}
}
 export default Router