[英]Cannot read property 'history' of undefined — react-router v4 & create-react-app
I could not use Link to navigate, here's my code 我无法使用链接进行导航,这是我的代码
Folders structure 文件夹结构
components
----App.js
----home
----Home
index.js
index.js index.js
import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import App from './components/App';
ReactDOM.render(
<App />
,
document.getElementById('root')
);
registerServiceWorker();
App.js App.js
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Home from './home/Home';
class App extends Component {
render() {
return (
<div className="App">
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<Link to="/home">home</Link>
<Router>
<Route
path={'/home'}
exact={true}
component={Home}
/>
</Router>
</div>
);
}
}
export default App;
Home.js Home.js
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<div className="Home">
Home Page
</div>
);
}
}
export default Home;
it seems to be ok without Link except that when i enter directly localhost:3000/home to url address bar, home component still doesn't appear. 没有链接似乎没问题,除了当我直接输入localhost:3000 / home到URL地址栏时,home组件仍然没有出现。 i have tried some way to update/re-install react-router but nothing changed.
我尝试了一些更新/重新安装react-router的方法,但没有任何改变。
Your Link
component need to be present within the Router
component. 您的
Link
组件必须存在于Router
组件中。 You can restructure your code like 您可以像这样重组代码
class App extends Component {
render() {
return (
<Router>
<div className="App">
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<Link to="/home">home</Link>
<Route
path={'/home'}
exact={true}
component={Home}
/>
</div>
</Router>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.