React-Router not working after using Switch tag

Question

i'm messing with React and i was trying to make some transition between the router pages. Before using the switch tag, my code was working just fine, but after, the roter wont work and no components get rendered.

This is my app.js

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./App.scss";
import "./vendor/bootstrap/bootstrap-reboot.min.css";
import "./vendor/bootstrap/bootstrap-grid.css";
import Content from "./components/Content";
import Header from "./components/Header";
import Skills from "./components/Skills";
import Portfolio from "./components/Portfolio";
import Timeline from "./components/Timeline";
import Footer from "./components/Footer";
import Monitoria from "./components/Monitoria";
import About from "./components/About";
import Contact from "./components/Contact";

class App extends Component {
  state = {
    header_infos: [
      {
        job: "Desenvolvedor Web",
        college: "Faculdade Guararapes - Ciência da Computação 5º Período"
      }
    ]
  };

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Header />
          <Route
            render={(location) => (
              <TransitionGroup>
                <CSSTransition
                  key={location.key}
                  timeout={300}
                  classNames="fade"
                >
                  <Switch location={location}>
                    <Route exact path="/" component={Header} />
                    <Route
                      exact
                      path="/"
                      render={() => (
                        <Content
                          job={this.state.header_infos[0].job}
                          college={this.state.header_infos[0].college}
                        />
                      )}
                    />
                    <Route exact path="/" component={Skills} />
                    <Route exact path="/" component={Portfolio} />
                    <Route exact path="/" component={Timeline} />
                    <Route path="/monitoria" component={Monitoria} />
                    <Route path="/about" component={About} />
                    <Route path="/contact" component={Contact} />
                  </Switch>
                </CSSTransition>
              </TransitionGroup>
            )}
          />
          <Footer />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

If needed, this is my navbar class:

import React from "react";
import "../sass/Header.scss";
import { NavLink } from "react-router-dom";

const Header = () => {
  return (
    <header className="">
      <NavLink exact to="/">
        <h1 className="logo">Logo</h1>
      </NavLink>
      <input type="checkbox" id="nav-toggle" className="nav-toggle" />
      <nav>
        <ul>
          <li className="menu-item">
            <NavLink to="/monitoria">Monitoria</NavLink>
          </li>
          <li className="menu-item">
            <NavLink to="/about">Sobre</NavLink>
          </li>
          <NavLink to="/contact" className="btn-rounded">
            <li className="menu-item">Fale comigo</li>
          </NavLink>
        </ul>
      </nav>
      <label htmlFor="nav-toggle" className="nav-toggle-label">
        <span />
      </label>
    </header>
  );
};

export default Header;

Actually, i dont know if i was doing the router the right way before, because i was using 3 . The reason was that i needed only these 3 components to be loaded in my index, and this was my workaround.

Before the modification, i was using only BrowserRouter and Route, no switch and it worked just fine, but without the transition animations. So i tried to follow one tutorial, and it said that i needed to use Switch and now nothing gets rendered and i really dont know why. Thanks, as always.

This is the tutorial i followed: https://www.youtube.com/watch?v=NUQkajBdnmQ

Answer 1

Switch will only render the first Route or Redirect that matches, so only <Route exact path="/" component={Header} /> gets rendered, although it seems you're already rendering that before the Switch anyway.

<Route
  exact
  path="/"
  render={() => (
    <Content
      job={this.state.header_infos[0].job}
      college={this.state.header_infos[0].college}
    />
  )}
/>
<Route exact path="/" component={Skills} />
<Route exact path="/" component={Portfolio} />
<Route exact path="/" component={Timeline} />

None of these components above will render as they're being ignored by the switch.

Best bet would be to create a parent component for the things that need to be on the path /, and render that in the first (and only) exact path="/" Route.

Answer 2

I guess only your Header would have rendered with what you have right now....

Unless you want that behaviour, you should not use the switch. According to it's documentation https://reacttraining.com/react-router/core/api/Switch

It would render the first Route or Redirect that matches the condition.