tengo un problema el cual que al momento de presionar un boton que me tiene que reireccionar a otro componente, solo se actualiza la pagina, aun sigo sin entender el porque sucede esto si las direcciones estan bien, ya probe utilizando maneras como import { useHistory } from 'react-router-dom'; pero me causan errores los cuales no logro encontrar la solucion. Lo que me he dado cuenta es que al presionar el boton me carga la misma pagina pero en la url me aparece que estoy en la direccion de R_Legal pero no me renderiza su contenido
import React from 'react';
import './App.css';
import logo from './imagenes/Logo.png';
import { Container } from 'react-bootstrap';
function App() {
const handleClick1 = () => {
window.location.href = '/components/R_Legal.js';
}
return (
<div className="app">
<header className="header">
<img className="logo" src={logo} alt="Logo" />
</header>
<main className="body">
<div className="container">
<div className="image-row">
<div className="image-container">
<img src={logo} alt="Imagen 1" />
<h3>Giro De La Empresa</h3>
<button className={"button"} onClick={handleClick1}>Ver</button>
</div>
<div className="image-container">
<img src={logo} alt="Imagen 2" />
<h3>Representante Legal</h3>
<button className={"button"} onClick={handleClick2}>Ver</button>
</div>
<div className="image-container">
<img src={logo} alt="Imagen 3" />
<h3>Problematica</h3>
<button className={"button"} onClick={handleClick3}>Ver</button>
</div>
</div>
<div className="image-row">
<div className="image-container">
<img src={logo} alt="Imagen 4" />
<h3>Propuesta de Solucion</h3>
<button className={"button"} onClick={handleClick4}>Ver</button>
</div>
<div className="image-container">
<img src={logo} alt="Imagen 5" />
<h3>Modulos App Web</h3>
<button className={"button"} onClick={handleClick5}>Ver</button>
</div>
</div>
</div>
</main>
<footer className="footer">
<Container className="fooContenido text-white text-center">
<p>xxx-xxxx-xxxx</p>
</Container>
</footer>
</div>
);
}
export default App;
Todo lo anterior lo tengo en el App.js que me crea por defecto y el otro archivo llamado R_Legal.js esta dentro de una carpeta llamada components que esta en el src
useNavigate
dereact route dom