0

Soy bastante nuevo en el uso de React y estoy desarrollado una plataforma web con Material UI. Estaba aprendiendo a enrutar mi página web con la react-route-dom y con el uso de BrowserRouter, Switch y Route.

Quiero mantener ciertos componentes como el Header en la página web y que, según el botón que clique, cambien el resto de componentes de la página de manera que pueda cambiar entre la página principal y una dos Headers, el que está por defecto en todas las rutas y otro añadido que es el mismo:

class Router extends Component {

render() {

    return (
        <BrowserRouter>
            <Header/>

            <main>
                <Switch>
                    <Route exact path="/" component={ListOfLessons}/>
                    <Route exact path="/g" component={Header}/>
                    <Route component={Error}/>
                    {/*<Route path="/segundo" component={Slider} />*/}
                </Switch>
            </main>

            <Footer/>
        </BrowserRouter>
    );
}
}
export default Router;

Entonces quería hacer que presionando un Button situado en el Header, me fuera por ejemplo del path "/" a "/g", por ejemplo, pero no se la sintaxis para hacerlo. He probado lo sigüiente sin éxito:

<Button variant="contained" color="primary" onClick={<NavLink to="/g" />}>¡Quiero saber más!</Button>

He visto que cuando el link es una palabra, no un boton, entonces si que funciona. Por ejemplo:

<li>
<NavLink to = "/g">¡Quiero saber más!</NavLink>
</li>
2
  • 1
    Intenta envolver la etiqueta button con NavLink <NavLink to="/g"><button>Quiero saber mas</button></NavLink>, puede que eso funcione, saludos.
    – g.4
    el 13 mar. 2021 a las 17:55
  • Funciono! Solo que tuve que añadir un estilo para que no apareciera la barra horizontal azul: style={{ textDecoration: 'none' }} el 13 mar. 2021 a las 18:15

1 respuesta 1

1

con react-router-dom puedes darle al usuario dos maneras de navegar, una es mediante una simple etiqueta Link que viene con react-router-dom y la otra manera es mediante lógica, a continuación unos ejemplos.

  1. Esta es una forma de enrutar utilizando las etiquetas

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

export default class Header extends Document {
   render(){
     return(
       <div>
         <Link to="/home">
           ir a la home
         </Link>
         <Link to="/dashboard">
           ir al tablero
         </Link>
       </div>
     )
   }
}
  1. Otra manera de poder redirigir a los usuarios es utilizando history que nos provee el Componente Route para manejar mediante logica, de esta manera

   <Switch>
     <Route exact path="/g" component={Header}/> //presta atencion al componente Header
   </Switch>

el componente Header que agregas como componente, recibe una propiedad del enrutador, si muestras por consola los props podras observar una propiedad history, puedes utilizar esta propiedad de la siguiente manera

export default class Header extends Document {

   GoHome(){
     this.props.history.push("/home")
   }

    render(){
        return(
        <div>
          <button onCkick={GoHome}>
            ir a la home
          </button>
        </div>
        )
    }
}

espero que hallas entendido, suerte.

5
  • Muy interesante! He probado lo que dices en la parte 2 pero me salta un error: "React Hook "useHistory" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook f unction react-hooks/rules-of-hooks". Lo he declarado tal y como pusiste en el ejemplo, dentro de class y antes de render el 13 mar. 2021 a las 18:09
  • ok esto es debido a un error mio, useHistory es un hook de react y como tal no se puede utilizar en una clase de react, editare la respuesta con otro ejemplo
    – Enzo
    el 13 mar. 2021 a las 18:46
  • Funcionó, gracias! el 17 mar. 2021 a las 16:17
  • no olvides votar la respuesta, saludos.!!
    – Enzo
    el 17 mar. 2021 a las 18:19
  • Buen ejemplo de respuesta me funciono para lo que estaba realizando. el 24 ene. 2022 a las 18:53

Tu Respuesta

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

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