无法读取未定义的属性“历史"——react-router v4 &创建反应应用程序 [英] Cannot read property 'history' of undefined -- react-router v4 & create-react-app

问题描述

我无法使用链接导航，这是我的代码

文件夹结构

组件----App.js-  - 家-  - 家索引.js

index.js

从'react'导入React；从 'react-dom' 导入 ReactDOM；从 './registerServiceWorker' 导入 registerServiceWorker；从'./components/App'导入应用程序；ReactDOM.render(<应用程序/>,document.getElementById('root'));注册服务工作者()；

App.js

import React, { Component } from 'react';进口 {BrowserRouter 作为路由器，路线，关联来自'反应路由器-dom';从'./home/Home'导入首页；类 App 扩展组件 {使成为() {返回 (<div className="应用程序"><p className="App-intro">首先，编辑 src/App.js;并保存以重新加载.</p><链接到="/home">home</Link><路由器><路线路径={'/home'}精确={真}组件={首页}/></路由器>

);}}导出默认应用程序；

Home.js

import React, { Component } from 'react';类 Home 扩展组件 {使成为() {返回 (<div className="首页">主页

);}}导出默认首页；

没有链接似乎没问题，只是当我直接输入 localhost:3000/home 到 url 地址栏时，仍然没有出现 home 组件.我尝试了一些更新/重新安装 react-router 的方法，但没有任何改变.

解决方案

Link 组件需要出现在 Router 组件中.你可以像

一样重构你的代码

class App 扩展组件 {使成为() {返回 (<路由器><div className="应用程序"><p className="App-intro">首先，编辑 src/App.js;并保存以重新加载.</p><链接到="/home">home</Link><路线路径={'/home'}精确={真}组件={首页}/>

</路由器>);}}

I could not use Link to navigate, here's my code

Folders structure

components
----App.js
----home
    ----Home
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

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

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. i have tried some way to update/re-install react-router but nothing changed.

解决方案

Your Link component need to be present within the Router component. 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>
    );
  }
}

这篇关于无法读取未定义的属性“历史"——react-router v4 &创建反应应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！