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;
Home
-import Home from '../src/views/Home/index';
, luego enRoutes
tienes otroHome
-import Home from '../views/Home';
, ¿Son el mismo Home? Saludos