Estou estudando ReactJS
e estou tendo um problema com as rotas. Eu consegui implementar a rota, porém quando clico para abrir uma página, ele permanece renderizando a página que estava aberta antes e só depois de apertar F5 é que atualiza para a página nova. Estou usando react-router-dom
.
Meu arquivo Routes.js
:
import React, {Component} from 'react';
import {Route, Switch} from 'react-router-dom';
import Event from './Event/Event';
export class Routes extends Component {
render() {
return (
<main className="container">
<BrowserRouter>
<Switch>
<Route path="/" exact={true} component={App} />
<Route path="/event" component={Event} />
</Switch>
</BrowserRouter>
</main>
)
}
};
export default Routes;
Meu arquivo Home.js
que tem o trecho que chama a próxima página, Event.js
:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../App.css';
import axios from 'axios';
const config = {
headers: {},
};
class Home extends Component {
state = {
events: []
}
componentDidMount() {
axios.get('https://web-services.yeapps.com.br/api/events', config)
.then(res => {
const events = res.data.data.events;
this.setState({ events });
console.log(events);
})
}
render() {
return (
<div className="container-fluid">
{ this.state.events.map((event, i) =>
<div className="card" key={i}>
<img className="card-img-top" src={ event.banner_app } alt="{event.name}" />
<div className="card-body">
<div className="row">
<div className="col-8 no-padding-left">
<h4 className="card-title">{event.name}</h4>
<p className="card-date">{event.date}</p>
<p className="card-place">{event.place}</p>
</div>
<div className="col-4 align-self-center justify-content-end">
<Link className="btn btn-primary" to="/event">Comprar</Link>
</div>
</div>
</div>
</div>
)}
</div>
)
}
}
export default Home;
Meu App.js
:
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
import './App.css';
import SideBar from './components/Sidebar/Sidebar'
import Header from './components/Header/Header'
import Home from './Home/Home';
import Event from './Event/Event';
class App extends Component {
render() {
return (
<BrowserRouter>
<div id="App">
<SideBar />
<Header Title="Home" />
<div id="page-wrap">
<Home />
<Event />
</div>
</div>
</BrowserRouter>
);
}
}
export default App;