Soy nuevo en reaccionar. Estoy usando react-router ^6.0.2 y mi problema es que creé un componente para el enrutador, luego llamé a este componente en el archivo de índice, pero cuando agrego otro componente al índice, se procesa en todas las rutas con la barra de navegación en cada ruta. Quiero que la barra de navegación se represente en todos los componentes pero no en el otro componente en el archivo de índice, lo siento por mi mal inglés.

archivo de índice:

 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"));

componente del enrutador:

 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