React-router-dom报Cannot read 'location' of undefined错误如何解决

• 错误使用底层Router组件：Home.jsx中引入的Router是react-router-dom的底层核心组件，必须传入history属性才能正常运行，你未传入该属性直接使用，直接触发location undefined的报错。
• 重复嵌套路由上下文：整个React应用只需要一个路由上下文即可，你已经在Routes.jsx中使用了BrowserRouter（封装好的上层Router组件），又在Home.jsx中额外套了一层错误的Router，导致路由上下文混乱。
• 路由结构不合理：Home组件直接渲染在App.js中，不在你声明的BrowserRouter上下文范围内，Home里的Link组件无法获取到正确的路由实例。

1. 修正Home.jsx #

删掉多余的Router引入和外层包裹的Router标签，修改后代码如下：

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

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>
  );
};

export default Home;

2. 调整Routes.jsx配置 #

删掉外层的BrowserRouter，添加首页路由规则，修改后代码如下：

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

const Routes = () => {
  return (
    <div>
        <Switch>
            <Route exact path='/' component={Home}></Route>
            <Route exact path='/registrationForm' component={RegistrationForm}></Route>
            {/* 可自定义添加404路由或者重定向规则 */}
            <Redirect to="/" />
        </Switch>
    </div>
  );
};

export default Routes

3. 修正App.js结构 #

把BrowserRouter移到App最外层，包裹所有内容，删掉直接渲染的<Home />，修改后代码如下：

import './App.css';
import { BrowserRouter } from 'react-router-dom'; // 新增BrowserRouter导入
import NavbarEsculturas from './Components/Navbar/Navbar';
import FooterEsculturas from './Components/Footer/Footer';
import Routes from './Components/Routes/Routes';

function App() {
  return (
    <BrowserRouter> {/* 最外层包裹路由上下文 */}
      <div className="App">
       <NavbarEsculturas />
       <Routes /> {/* Home已经在路由规则中配置，不需要单独渲染 */}
       <FooterEsculturas />
      </div>
    </BrowserRouter>
  );
}

export default App;

如果你的需求是所有页面都固定显示Home内容，只需要把Home组件放到Switch标签外部即可，无需放在路由规则中。

内容的提问来源于stack exchange，提问作者Sebastian Rosas Bruno