React-router-dom：TypeError：無法讀取未定義的屬性（讀取“位置”）-有解無憂

我的應用程式運行良好，直到我宣告了路由:( 我在名為“Routes.jsx”的外部組件中宣告了路由，我在組件“Home.jsx”中鏈接了路由，并在組件上使用了組件“Routes” App.js'。有人可以告訴我我的錯誤在哪里嗎？謝謝！

這是我的路線檔案“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

這是我宣告鏈接“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;

這是我想重定向到“RegistrationForm.jsx”的頁面

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

const RegistrationForm = () => {

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


export default RegistrationForm

這里可能是“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;

uj5u.com熱心網友回復：

嘗試將應用程式包裝在這樣的路線中：

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

  );
}

uj5u.com熱心網友回復：

這取決于您使用歷史物件的頁面。可能是您<Router>...</Router>在使用 useLocation 和 useHistory 的同一組件中將路由器添加到 DOM 。您應該在高階組件中使用路由器來使歷史物件可用。因此<Router>...</Router>，將組件的包裝上移一級。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338062.html

標籤：反应反应原生反应路由器dom

上一篇：styled()中shouldForwardProp選項的目的是什么？

下一篇：在ReactJS中迭代物件