我正在创建一个简单的React应用程序,并且在实现“路由”时出现以下错误:
TypeError:无法读取react中未定义的属性“位置”。
App.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;
我在这里想念什么?
答案 0 :(得分:1)
这里的问题似乎与路由器包的导入有关。
安装:npm install --save react-router-dom
将包导入到您的App.js中为:
import { BrowseRouter, Route } from "react-router-dom";
现在将您的App.js render()
函数修改为-
return (
<BrowseRouter>
<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>
</BrowseRouter>
);