React-router-dom：TypeError：无法读取未定义的属性（读取“位置”）

Posted 2023-03-16

【中文标题】React-router-dom：TypeError：无法读取未定义的属性（读取“位置”）

【英文标题】：React-router-dom: TypeError: Cannot read properties of undefined (reading 'location')

【发布时间】：2021-12-12 05:41:13

【问题描述】：

在我宣布路线之前，我的应用程序运行良好 :( 我在一个名为“Routes.jsx”的外部组件中声明了路由，我在组件“Home.jsx”中链接了路由，并在组件“App.js”上使用了组件“Routes”。 有人可以告诉我我的错误在哪里吗？ 谢谢！

这是我的路线档案“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  />

        <div className="sculptureLocationCard">
          <img className="locationLogo" src=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;

【参考方案1】：

尝试将应用程序包装在这样的路由中：

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

  );

【讨论】：

您好！我试过了，但没有用:(

【参考方案2】：

这取决于您使用历史对象的页面。可能是您在使用 useLocation 和 useHistory 的同一组件中使用 <Router>...</Router> 将路由器添加到 DOM。您应该在高阶组件中使用路由器以使历史对象可用。 因此，将组件的 <Router>...</Router> 包装上移一层。

【讨论】：

我试图将 ... 移动到组件 'App.js' 但它不起作用。您是否想说将 ... 移到更高阶？

这意味着所有必须使用历史记录的组件都必须像这样封装在路由器中：<Router> Put the components here </Router>

请注意只有Router接受history prop（BrowserRouter不接受），所以一定要相应地更新你的路由器JSX

【参考方案3】：

让我们从App中移出Router组件的使用，首先从'Routes.jsx'中移除BrowserRouter：

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

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


export default Routes

然后更改 index.js ：

//........
import  BrowserRouter as Router  from 'react-router-dom'


ReactDOM.render(
    <Router>
      <App />
    </Router>,
  document.getElementById('root'),
)