Routes in Reactjs

Question

I’m studying ReactJS and I’m having a problem with the routes. I managed to implement the route, but when I click to open a page, it remains rendering the page that was open before and only after pressing F5 is updating to the new page. I am using react-router-dom. My file 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;

My file Home.js that has the passage that calls the next page, 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;

Man 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;

Answer 1

OK... There’s some weird stuff in the code. The Routes.jsis not being used. At least not in those files you showed. Inside this file you are using the App component in this excerpt <Route path="/" exact={true} component={App} /> but he wasn’t imported.

In the App.js you are rendering the App and Event together.

The Switch is used to define a single component that will be used in a given route.

I suggest removing the Switch Routes.js and put in App.js, this way:

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;

This way, the home or Event will render according to the route. Another thing, when a property is true you do not need to set the value to true, just put the property to no value. For example the exact, if true you don’t need to put exact={true}

Anything, just let me know