el problema es el siguiente. en app.js se deletrea Rutas y el componente de inicio. la casa contiene una barra de navegación que navega por el sitio, solo si va a cualquier página, se dibuja en la parte superior de la casa. Y si cambia a la casa en sí, se duplicará. Los artículos en Internet no ayudaron, al igual que la adición de la ruta exacta en la ruta.
function App() { return ( <div className="messenger"> <Routes> <Route path="/home/" element={<Home/>}/> <Route path="/settings/" element={<Settings/>}/> <Route path="/login/" element={<Login/>}/> <Route path="/register/" element={<Register/>}/> </Routes> <Home/> </div> )hogar
export default class Home extends Component { render() { return ( <div> <NavBar/> <ChatMenu/> </div> ); } }un ejemplo de cómo está escrito en la barra de navegación
export const NavBar = () => { return (<div className="navbar-cm"> <div className="nav_element"> <Link to="/home"> <img src={homeIMG} className="nav_element"/> </Link> </div> and a few more similar ones </div>); }; Está renderizando el componente Home nuevamente una vez fuera de las rutas, es por eso que se renderiza con todas las rutas, incluso dos veces cuando está en la ruta "/home" que renderiza Home .
function App() { return ( <div className="messenger"> <Routes> <Route path="/home/" element={<Home />} /> <Route path="/settings/" element={<Settings />} /> <Route path="/login/" element={<Login />} /> <Route path="/register/" element={<Register />} /> </Routes> <Home /> // <-- always rendered below routed content </div> ) } Retire el componente Home que está fuera de las rutas.
function App() { return ( <div className="messenger"> <Routes> <Route path="/home/" element={<Home />} /> // <-- now only Home component rendered <Route path="/settings/" element={<Settings />} /> <Route path="/login/" element={<Login />} /> <Route path="/register/" element={<Register />} /> </Routes> </div> ) }Eliminar <Home /> del enrutador:
function App() { return ( <div className="messenger"> <Routes> <Route path="/home/" element={<Home/>}/> <Route path="/settings/" element={<Settings/>}/> <Route path="/login/" element={<Login/>}/> <Route path="/register/" element={<Register/>}/> </Routes> </div> )