简体   繁体   English

类型错误:无法在反应中读取未定义的属性“位置”

TypeError: Cannot read property 'location' of undefined in react

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文简体   中文繁体   英文版本 版本,有任何建议请联系yoyou2525@163.com。

I am creating a simple React application, and while implementing Routing I get following error:我正在创建一个简单的 React 应用程序,在实现路由时出现以下错误:

TypeError: Cannot read property 'location' of undefined in react.类型错误:无法读取反应中未定义的属性“位置”。

App.js:应用程序.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Header from "./components/header";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
import { Router, Route} from 'react-router'

class App extends Component {
  render() {
    return (
      <div className="App">
      <Header />

   <Router>
      <Route path = "/" component = {App}>
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>

            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

What am I missing here?我在这里缺少什么?

1 个回复

The problem here seems to be with import of router package.这里的问题似乎与路由器包的导入有关。

install: npm install --save react-router-dom安装: npm install --save react-router-dom

Import the package in your App.js as:将 App.js 中的包导入为:

import { BrowserRouter, Route } from "react-router-dom";

And now modify your App.js render() function as-现在将您的 App.js render()函数修改为-

 return (
  <BrowserRouter>
      <div className="App">
      <Header />

        <Route exact path = "/" component = {Home} />
        <Route path = "about" component = {About} />
        <Route path = "contact" component = {Contact} />


      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>

          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a  className="App-link"  href="https://reactjs.org"target="_blank"  rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  </BrowserRouter>
);
2 收到TypeError:无法读取React中未定义的属性&#39;location&#39; - Getting TypeError: Cannot read property 'location' of undefined in React

我正在学习React并试图绕过React路由器。 我有一个将数据显示到表组件中的API,我想将项目名称用作URL参数。 例如,如果国家/地区名称是USA,那么我想使用localhost:3000 / USA显示数据。 我尝试实现此路由,但给出了错误。 这是我的代码: Index.js Ap ...

9 类型错误:无法读取 React 中未定义的属性“map” - TypeError: Cannot read property 'map' of undefined in React

我收到错误TypeError: Cannot read property 'map' of undefined 。 好吧,我有数组对象,我正在提取对象键,但是当我映射一个函数时,它会给我错误,有人可以帮助我如何解决我的问题。 我试过了,但我失败了,我需要解决这个应用程序。 代码 在渲染函数中, ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM