React-router-dom: TypeError: Cannot read properties of undefined (reading 'location')-CodePudding

My application worked well until I declared the routes :( I declared the routes in an external component called 'Routes.jsx', I link the route in the component 'Home.jsx' and I use the component 'Routes' on the component 'App.js'. Can someone show me where is my error, please? Thanks!

This is my Route archive 'Routes.jsx'

import React from "react";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import RegistrationForm from '../RegistrationForm/RegistrationForm';
import Home from "../Home/Home";

const Routes = () => {
  return (
    <BrowserRouter>
      <div>
          <Switch>
              <Route exact path='/registrationForm' component={RegistrationForm}>
              </Route>
          </Switch>
      </div>
    </BrowserRouter>
  );
};


export default Routes

This is the file in that I declared the Link 'Home.jsx'

import React from "react";
import "./home.css";
import Escultura from "../../Assets/Home/esculturaHome.png";
import LocationLogo from "../../Assets/Home/sculptureLocationCard/location.png";
import { Link, Router } from "react-router-dom";

const Home = () => {
  return (
    <Router>
      <div className="homeContainer">
        <div className="leftSectionContainer">
          <p className="titleHome">
            <span className="firstword">Resistencia </span> Capital <br></br>
            Nacional de las esculturas
          </p>
          <p>
            Ciudad de las Esculturas es un portal colaborativo donde podrás{" "}
            <br></br>
            encontrar, calificar y cargar nuevas esculturas a la comunidad.
          </p>
          <Link to="/registrationForm">
            <button className="button">Colaborar</button>
          </Link>
        </div>
        <img className="esculturaHome" src={Escultura} alt="Escultura" />

        <div className="sculptureLocationCard">
          <img className="locationLogo" src={LocationLogo} alt="LocationLogo" />
          <p className="sculptureLocationTitle">MICROSMOS</p>
          <p className="sculptureLocationSubTitle">Av.Alberdi y Aturo Illia</p>
        </div>
      </div>
    </Router>
  );
};

export default Home;

This is the page that I want to redirect to 'RegistrationForm.jsx'

import React from "react";
import './registrationForm.css';

const RegistrationForm = () => {

    return (
        <div>
            <p>
                Test 
            </p>
        </div>
    );
}


export default RegistrationForm

And here is may 'App.js'


import './App.css';
import NavbarEsculturas from './Components/Navbar/Navbar';
import FooterEsculturas from './Components/Footer/Footer';
import Home from './Components/Home/Home' ;
import Routes from './Components/Routes/Routes';


function App() {
  return (
    <div className="App">
     <NavbarEsculturas />
     <Home />
     <Routes />
     <FooterEsculturas />
    </div>
  );
}

export default App;

CodePudding user response：

try to wrap the app in a route like this:

  function App() {
  return (
    <Router>
    <div className="App">
     <NavbarEsculturas />
     <Home />
     <Routes />
     <FooterEsculturas />
    </div>
    </Router>

  );
}

CodePudding user response：

It depends of the page in which you are using the history object. May be you are adding the Router to the DOM with <Router>...</Router> in the same component you are using useLocation and useHistory. You should use the Router in a higher-order component to make the history object available. So move the <Router>...</Router> wrapping of your component one level up.