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.