Component it's not being display in react app

Question

I'm trying to do a routing to a calculus page in my app, the router functioned just fine, but sadly the component that I selected it's not displayed, I used react router, link, history.push and switch. In my login route I used almost the same code and all worked fine.

So if anyone could take a look at the code, please.

Code

import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useHistory,
  //useLocation,
} from "react-router-dom";
import classNames from "classnames";
import { SectionProps } from "../../utils/SectionProps";
import ButtonGroup from "../elements/ButtonGroup";
import Button from "../elements/Button";
import Image from "../elements/Image";
import Modal from "../elements/Modal";

import CalculusIntro from "./partials/CalculusIntro";

const propTypes = {
  ...SectionProps.types,
};

const defaultProps = {
  ...SectionProps.defaults,
};

const Hero = ({
  className,
  topOuterDivider,
  bottomOuterDivider,
  topDivider,
  bottomDivider,
  hasBgColor,
  invertColor,
  ...props
}) => {
  const [videoModalActive, setVideomodalactive] = useState(false);

  let history = useHistory();

  const openModal = (e) => {
    e.preventDefault();
    setVideomodalactive(true);
  };

  const closeModal = (e) => {
    e.preventDefault();
    setVideomodalactive(false);
  };

  const outerClasses = classNames(
    "hero section center-content",
    topOuterDivider && "has-top-divider",
    bottomOuterDivider && "has-bottom-divider",
    hasBgColor && "has-bg-color",
    invertColor && "invert-color",
    className
  );

  const innerClasses = classNames(
    "hero-inner section-inner",
    topDivider && "has-top-divider",
    bottomDivider && "has-bottom-divider"
  );

  return (
    <Router>
      <section {...props} className={outerClasses}>
        <div className="container-sm">
          <div className={innerClasses}>
            <div className="hero-content">
              <h1
                className="mt-0 mb-16 reveal-from-bottom"
                data-reveal-delay="200"
              >
                Solução em <span className="text-color-primary">fretes</span>{" "}
                para o seu negócio!
              </h1>
              <div className="container-xs">
                <p
                  className="m-0 mb-32 reveal-from-bottom"
                  data-reveal-delay="400"
                >
                  25 anos de experiência em gestão de fretes.
                </p>
                <div className="reveal-from-bottom" data-reveal-delay="600">
                  <ButtonGroup>
                    <Button tag="a" color="primary" wideMobile>
                      <Link
                        to="/calculo"
                        onClick={() => {
                          history.push("/calculo");
                        }}
                      >
                        Faça uma cotação
                      </Link>
                    </Button>
                    <Button tag="a" color="dark" wideMobile href="#">
                      Seja nosso cliente
                    </Button>
                  </ButtonGroup>
                  <Switch>
                    <Route
                      path="/calculo"
                      component={CalculusIntro}
                    ></Route>
                  </Switch>
                </div>
              </div>
            </div>
            <div
              className="hero-figure reveal-from-bottom illustration-element-01"
              data-reveal-value="20px"
              data-reveal-delay="800"
            >
              <a
                data-video="https://player.vimeo.com/video/416768488"
                href="#0"
                aria-controls="video-modal"
                onClick={openModal}
              >
                <Image
                  className="has-shadow"
                  src={require("./../../assets/images/video-placeholder.jpg")}
                  alt="Hero"
                  width={1200}
                  height={800}
                />
              </a>
            </div>
            <Modal
              id="video-modal"
              show={videoModalActive}
              handleClose={closeModal}
              video="https://player.vimeo.com/video/416768488"
              videoTag="iframe"
            />
          </div>
        </div>
      </section>
    </Router>
  );
};

Hero.propTypes = propTypes;
Hero.defaultProps = defaultProps;

export default Hero;

Answer 1

You can create a file called Routers:

const Routers =() => {
    return(
        <Router history={history}>
            <Switch>
                    <Route path="/" component={Comments} exact />
                    <Route path="/theme" component={Theme} exact />
            </Switch>
        </Router>
    )
}

in your App.js, just render the Router's component:

class App extends Component {

  render() {
    return (
        <Routers></Routers>
    )
  }
}

you need wrapper you Aplication:

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

create a file called history

import { createBrowserHistory as history} from 'history';

export default history();

now import the previous class

import history from './history';
  <div><Button onClick={() => history.push('/theme')}>see</Button></div>

my dependencies are:

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },

Answer 2

Try adding the exact attribute to your route.

<Route path="/calculo" component={CalculusIntro} exact></Route>