0

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

2
  • Por favor no dupliques preguntas. Si necesitas añadir detalles, edita la pregunta original. Te invito a leer Cómo preguntar y a realizar el recorrido de bienvenida. Saludos el 14 may. a las 8:32
  • "pero me causan errores los cuales no logro encontrar la solucion.", que errores te da? dificil ayudar si no ponen los errores, pero a simple vista puedo ver que no estas usando useNavigate de react route dom
    – David081
    el 15 may. a las 11:45

2 respuestas 2

0

En lugar de usar window.location.href para redirigir a otra ruta, ¿Porque no aprovechas las capacidades de enrutamiento de React Router?

Utilizando React Router:

Instala la dependencia:

npm install react-router-dom

Importa los componentes necesarios de React Router en tu archivo App.js:

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import RLegal from './components/R_Legal';

Envuelve tu componente App con el componente Router de React Router:

function App() {
  return (
    <Router>
      {/* El resto del código de tu componente App */}
    </Router>
  );
}

Crea una nueva ruta para el componente RLegal dentro del componente App utilizando el componente Route:

function App() {
  return (
    <Router>
      {/* Resto del código de tu componente App */}
      <Switch>
        <Route path="/r_legal" component={RLegal} />
      </Switch>
    </Router>
  );
}

Modifica la función handleClick1 para redirigir correctamente al componente RLegal utilizando el componente Link en lugar de usar window.location.href:

import { Link } from 'react-router-dom';

// ...

const handleClick1 = () => {
  // Redireccionar a '/r_legal'
}

// ...

<button className="button">
  <Link to="/r_legal">Ver</Link>
</button>

Ten en cuenta que cuando se haga clic en el botón "Ver", se activará la navegación de React Router y se cargará el componente RLegal en lugar de recargar la página completa.

Asegúrate de crear el archivo R_Legal.js dentro de la carpeta components y definir el componente RLegal correctamente.

0

Al momento de que quise usar el react router doom siempre me marcaba un error, luego me llegue a dar cuenta que con las nuevas versiones de react la estructura y el fragmento de codigo se llegaron a renombrar, para los que tengan el mismo problema con esto es que pueden hacerlo.

Primero, asegúrate de tener instalada la versión 6 de react-router-dom. Puedes instalarla mediante npm o yarn:

npm install react-router-dom@next

Luego, importa los componentes Route y Link en tu archivo:

import { Navigate } from 'react-router-dom';

y por ultimo:

import { Navigate } from 'react-router-dom';

function MyComponent() {
const handleButtonClick = () => {
// Realiza la navegación a '/ruta-destino'
return <Navigate to="/ruta-destino" />;
};

return (
<div>
  <h1>Mi componente</h1>
  <button onClick={handleButtonClick}>Navegar</button>
</div>
);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.