簡體   English   中英

類型錯誤:無法在反應中讀取未定義的屬性“位置”

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

提示:本站收集StackOverFlow近2千萬問答,支持中英文搜索,鼠標放在語句上彈窗顯示對應的參考中文或英文, 本站還提供   中文簡體   英文版本   中英對照 版本,有任何建議請聯系yoyou2525@163.com。

我正在創建一個簡單的 React 應用程序,在實現路由時出現以下錯誤:

類型錯誤:無法讀取反應中未定義的屬性“位置”。

應用程序.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;

我在這里缺少什么?

1 個回復

這里的問題似乎與路由器包的導入有關。

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

將 App.js 中的包導入為:

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

現在將您的 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>
);
暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2022 STACKOOM.COM