React - 元素類型無效：期望字符串

Question

所以我想將我的React 2應用程序轉換爲React 4.我正在做的第一件事是處理新的React路由器，但我有一個數字的問題。我正在發佈的是讓鏈接組件工作。在我的Layout.js中添加鏈接組件時，出現以下錯誤（請參見下文）。如果我刪除鏈接組件錯誤消失。任何想法爲什麼發生這種情況？

app.js

import React from 'react'; 
import { render } from 'react-dom'; 
import { BrowserRouter, Route } from 'react-router-dom'; 

import Layout from "./components/Layout"; 
import About from "./components/About"; 
import NotFound from "./components/Layout"; 

const App =() => { 
    return (
    <BrowserRouter> 
     <div> 
     <Route exact path="/" component={Layout} /> 
     <Route path="/about" component={About} /> 
     <Route component={NotFound} /> 
     </div> 
    </BrowserRouter> 
) 
} 
const app = document.getElementById('app'); 

render(<Layout />, app); 

Layout.js

import React from "react"; 
import { Link } from 'react-router-dom'; 

export default class Layout extends React.Component { 
    render() { 
    return (
     <div> 
     <div> 
      <h1> 
      Layout 
      </h1> 
      <ul> 
      <li><Link to="/">Home</Link></li> 
      <li><Link to="/about">About</Link></li> 
      </ul> 
     </div> 
     </div> 
    ); 
    } 
} 

About.js

import React from "react"; 

export default class About extends React.Component { 
    render() { 
    return (
     <h2> 
      About 
     </h2> 
    ); 
    } 
} 

的package.json

{ 
    "name": "react-tutorials", 
    "version": "0.0.0", 
    "description": "", 
    "main": "webpack.config.js", 
    "dependencies": { 
    "babel-loader": "^6.2.0", 
    "babel-plugin-add-module-exports": "^0.1.2", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-plugin-transform-class-properties": "^6.3.13", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "history": "3.0.0", 
    "react": "^0.14.6", 
    "react-dom": "^0.14.6", 
    "react-router": "^4.1.1", 
    "react-router-dom": "^4.1.1", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "devDependencies": { 
    "react-hot-loader": "^1.3.1", 
    "webpack-dev-server": "^1.16.5" 
    }, 
    "scripts": { 
    "start": "webpack-dev-server --content-base src --inline --hot", 
    "dev": "webpack-dev-server --content-base src --inline --hot", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC" 
} 

錯誤

Uncaught TypeError: Cannot read property 'history' of undefined 
    at Link.render (Link.js:76) 
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:587) 
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:607) 
    at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (ReactPerf.js:66) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:220) 
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66) 
    at Object.mountComponent (ReactReconciler.js:37) 
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:241) 
    at ReactDOMComponent._createContentMarkup (ReactDOMComponent.js:591) 
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:479) 

Answer 1

您正在從react-router導入BrowserRouter和Link，但它們需要從react-router-dom導入。你應該真的在他們的文檔上查看basic example，因爲它不一定是從反應路由器2到4的簡單合併。由於你依賴Match和Miss，你將遇到其他問題。

你「再會需要作如下修改app.js：

import React from 'react'; 
import { render } from 'react-dom'; 
import { BrowserRouter, Route } from 'react-router-dom'; 

import Layout from "./components/Layout"; 
import About from "./components/About"; 
import NotFound from "./components/Layout"; 

const App =() => { 
    return (
    <BrowserRouter> 
     <div> 
     <Route exact path="/" component={Layout} /> 
     <Route path="/about" component={About} /> 
     <Route component={NotFound} /> 
     </div> 
    </BrowserRouter> 
) 
} 
const app = document.getElementById('app'); 

render(<App />, app); 

...與以下更改Layout.js：

import React from "react"; 
import { Link } from 'react-router-dom'; 

export default class Layout extends React.Component { 
    render() { 
    return (
     <div> 
     <div> 
      <h1> 
      Layout 
      </h1> 
      <ul> 
      <li><Link to="/">Home</Link></li> 
      <li><Link to="/about">About</Link></li> 
      </ul> 
     </div> 
     </div> 
    ); 
    } 
} 

你的錯誤會被抓，如果你是使用棉絨，像ESLint。我強烈建議調查一下。

Answer 2

相信在4版本中，你必須從反應路由器-DOM進口環節

import { Link } from 'react-router-dom' 

附加文檔： https://reacttraining.com/react-router/web/api/Link