0

estoy intentando agregar rutas para acceder a un link desde app.js, mi archivo index.js es el siguiente:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<App />, document.getElementById('root'));

ReactDOM.render((
    <BrowserRouter>
      <App />
    </BrowserRouter>
    ), document.getElementById('root')
  );

serviceWorker.unregister();

cree un componente Main.js con la ruta a pages/home:

import React from 'react';
import { HashRouter,Switch, Route } from 'react-router-dom';

import Home from '../pages/Home';

const Main = () => {
  return (
    <HashRouter>
    <Switch>
      <Route exact path='/home' component={Home}></Route>
    </Switch>
    </HashRouter>
  );
}

export default Main;

y un Home.js con la página a la que quiero linkear:

import React from 'react';

const Home = () => {

  function sayHello() {
    alert('Hello, World!');
  }

  return (
    <button onClick={sayHello}>Click me!</button>
  );
};

export default Home;

finalmente en app.js coloco el link de la siguiente forma:

<div className="container">
  <HashRouter>
  <Link to={'/home'} replace className="text-danger font-weight-bold">Recuperar password <span className="glyphicon glyphicon-lock"></span></Link>
  </HashRouter>

El link al presionarlo cambia la url a http://localhost:3000/home, peor no lleva a la página queda estatica. Algún consejo para salir del problema?

2
  • Ya intentaste quitar el HashRouter que está antes del Link? el 6 mar. 2020 a las 4:13
  • por que tienes la etiqueta de react-native ? no hay nada relacionado con dicha tecnología en tu problema
    – Enzo
    el 20 may. 2021 a las 18:05

1 respuesta 1

0

No necesitas HasRouter para declarar las rutas [Route] y tampoco para enlaces [Link] de hecho los link pueden ir independientemente

import React, {Component} from 'react';
import Home from './componente/Home';
import Navbar from './componente/Navbar';

import { BrowserRouter as Router,  Switch,  Route} from "react-router-dom";
class App extends Component {
  render(){
    return (
      <Router>
        <div className="App">
          <Navbar />
        </div>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/home" exact component={Home} />
        </Switch>
        <Footer />
      </Router>
    )
  }
}

export default App;

ReactDOM.render((
      <App />
  ), document.getElementById('root')
);// este solo déjalo como está

//Aquí no necesitas  `HasRouter`
<div className="container">
  <Link to={'/home'} replace className="text-danger font-weight-bold">
    Recuperar password 
    <span className="glyphicon glyphicon-lock"></span>
  </Link>
</div>

// Cuales se funciona
<NavLink className="nav-link" to="/home">Inicio</NavLink>
<Link to="/home">Home</Link>
2
  • cuando agrego eso a app.js sale el contenido de Home.js encima del html de app.js no me redirecciona a Home el 6 mar. 2020 a las 13:22
  • @user2820116 es que la idea del Route es que renderice el componente que se le esta pasando por props cuando la ruta coincida, si lo que quieres que toda la pagina se modifique, tiene que estar dentro del componente Home. Ahora bien, en principio, si usas BrowserRouter, no debes usar HashRouter, es uno, o es otro, no puedes tener mas de un manejador de rutas. Yo excluiría la etiqueta <Router> y solo dejaría las etiquetas <Switch> y <Route>. el 8 mar. 2020 a las 1:45

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.