-2

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;

1 Resposta 1

1

ok... tem algumas coisas estranhas no codigo. O Routes.jsnão esta sendo usado. Pelo menos não nesses arquivos que você mostrou. Dentro desse arquivo você está usando o componente App nesse trecho <Route path="/" exact={true} component={App} /> mas ele não foi importado.

No App.js você está renderizando o App e o Event juntos.

O Switch é usado para definir um único componente que vai ser usado em uma determinada rota.

Sugiro retirar o Switch do Routes.js e colocar no App.js, dessa forma:

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">
            <Switch>
              <Route path="/" exact component={ Home } />
              <Route path="/event" exact component={ Event } />
            </Switch>
          </div>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Dessa forma, a home ou event vai renderizar de acordo com a rota. Outra coisa, quando uma propriedade for true você não precisa colocar o valor como true, é só colocar a propriedade sem valor. Por exemplo o exact, se for true você não precisa colocar exact={true}

Qualquer coisa é só avisar

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .