Skip to main content
se añadió 1 carácter en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

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

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

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

Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

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.