1

Hola estoy teniendo problemas al enrutar desde un boton hacia una vista en react, ya instale react-router-dom, pero lo que me sucede es que si le doy click al boton de signup en la vista de home, me deberia redireccionar a la ruta /test, pero ello no ocurre, lo que sucede es que marca la ruta en la url pero el contenido de la vista me lo renderiza en la misma vista de home y no se ve (si no inspecciono html). Mi configuracion es la siguiente:

En views/home:

    // React
    import React from 'react';

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

    // Style
    import './style.sass';

    import homeImage from '../../assets/images/home/home-image.png';

    class Home extends React.Component {
        render() {
            return(
                <div className="home-container">
                    <div className="home-content-left">
                        <h1 className="find-books-text">FIND BOOKS</h1>
                        <h1 className="find-books-text">YOU LIKE</h1>
                        <button><Link to='/test'>SIGN UP</Link></button>
                    </div>
                    <div className="home-image-picture">
                        <img src={homeImage} />
                    </div>
                    <div className="home-figure">

                    </div>
                </div>
            );
        }
    }

    export default Home;

En index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// Context Provider
import AppProvider from '../src/context/context';

// React-bootstrap styles
import 'bootstrap/dist/css/bootstrap.min.css';

// React router dom
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
{/*     <AppProvider> */}
      <BrowserRouter>
        <App />
      </BrowserRouter>
{/*     </AppProvider> */}
  </React.StrictMode>,
  document.getElementById('root')
);

Dentro de app.js:

// React
import React, { Fragment } from 'react';

// Components
import Home from '../src/views/Home/index';
import NavBar from './components/navbar';

// Routes
import Routes from './route';

function App() {
  return (
    <Fragment>
      <Home />
      <NavBar />
      <Routes />
    </Fragment>
  );
}

Aparte tengo una carpeta en src/route en donde tengo las rutas:

    // React
    import React from 'react';

    // React-router-dom
    import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

    // Views
    import Test from '../views/Test';
    import Home from '../views/Home';

    class Routes extends React.Component {
    render() {
        return (
            <Switch>
                <Route
                path="/"
                component={Home} exact/>
                <Route
                path="/test"
                component={Test} />
            </Switch>
        );
    }
    }
    export default Routes;
1
  • En App tienes un componente Home - import Home from '../src/views/Home/index';, luego en Routes tienes otro Home- import Home from '../views/Home';, ¿Son el mismo Home? Saludos
    – g.4
    Commented el 1 feb. 2021 a las 2:27

2 respuestas 2

1

Lo que sucede es que marca la ruta en la url pero el contenido de la vista me lo renderiza en la misma vista de home

Con la configuración actual, cuando se quiere ocultar el componente Home enrutando hacia el componente Test, Home se vuelve a mostrar, pues esta posicionado encima de <Routes>, que es donde se especificó el contenido para cada ruta:

function App() {
  return (
    <Fragment>
      <Home /> {/*Siempre se muestra*/}
      <NavBar />
      <Routes />{/*Luego están mis rutas*/}
    </Fragment>
  );
}

Ya se configuró el contenido de la ruta "/", direcciona hacia el componenteHome, esto dentro de Routes:

class Routes extends React.Component {
  render() {
      return (
          <Switch>
              <Route
              path="/"
              component={Home} exact/>
              <Route
              path="/test"
              component={Test} />
          </Switch>
      );
  }
}

Entonces, solo hay que reconfigurar el árbol de componentes iniciales en App:

function App() {
  return (
    <Fragment>
      {/*<Home /> se quita, está demás*/}
      <Routes />{/*inicia el manejo de contenidos de las rutas*/}
      <NavBar />
    </Fragment>
  );
}

Aquí, un demo basado en tu código original:

const Router = window.ReactRouterDOM.BrowserRouter;
const Route =  window.ReactRouterDOM.Route;
const Link =  window.ReactRouterDOM.Link;
const Switch = window.ReactRouterDOM.Switch;

function App(){
  return(
    <div>
    <ReactRouterDOM.HashRouter>
      <Routes />
      <NavBar />
    </ReactRouterDOM.HashRouter>
    </div>
  );
}

class Home extends React.Component {
  render() {
      return(
          <div className="home-container">
            <button><Link to='/test'>SIGN UP</Link></button>
          </div>
      );
  }
}

class Routes extends React.Component {
  render() {
      return (
          <Switch>
              <Route
              path="/"
              component={Home} exact/>
              <Route
              path="/test"
              component={Test} />
          </Switch>
      );
  }
}

class Test extends React.Component{
  render(){
    return (
      <div>
        <h3>Test</h3>
        <button><Link to='/'>Back to Home</Link></button>
      </div>
    );
  }
}

class NavBar extends React.Component{
  render(){
    return <h3>Navbar</h3>
  }
}
 
 
ReactDOM.render(<App/>, document.getElementById('root'))
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
 

<div id="root"></div>

Espero que esta respuesta sea de ayuda.

2
  • Fanstastico, gracias me ha servido!
    – Richi
    Commented el 1 feb. 2021 a las 14:52
  • 1
    @ricardoleivasikic que bien, tu código ya estaba listo, solo faltaba ajustar el árbol de componentes al inicio, yo también pase por el mismo problema cuando revise los conceptos de react-router, si consideras que la respuesta fue útil, vota por ella, suerte y salud.
    – g.4
    Commented el 1 feb. 2021 a las 17:57
0

prueba utilizar la propiedad history que recibe tu componente, de esta forma:

import React,{Component} from 'react';

class App extends Component{
  gotoTest = () => {
    this.props.history.push('/test')
  }

  render() {
    return (
      <div>
        <button onClick={this.gotoTest}>Home</button>
      </div>
    )
  }
}

export default App;

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.