Skip to main content
1 de 2

Rotas no ReactJS

Fala devs, estou estudando reactjs e tô tendo um probleminha com as rotas. Eu consegui implementar a rota, porém qd clico pra abrir uma página, ele permanece renderizando a página que estava aberta antes e só dps de apertar F5 é q atualiza pra página nova. Estou usadon 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 q 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;