Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
428 views
in Technique[技术] by (71.8m points)

javascript - 当我将React Router与Webpack一起使用时,它显示错误“ React.createElement:类型无效”(When I use react router with webpack, it shows the error “React.createElement: type is invalid”)

index.html(index.html)

<html> <head> <title>Webpack and React</title> <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cerulean/bootstrap.min.css" rel="stylesheet"> </head> <body> <div id="app">hello</div> <script src="index.js"></script> </body> </html> index.js(index.js) import React from "react"; import ReactDom from "react-dom"; import {BrowserRouter as Router, Route} from "react-router"; import Layout from "./pages/Layout"; import Featured from "./pages/Featured"; import Archives from "./pages/Archives"; import Settings from "./pages/Settings"; const app = document.getElementById('app'); ReactDom.render( <Router> <Route path = "/" component={Layout}/> </Router>, app); Layout.js(Layout.js) import React from "react"; export default class Layout extends React.Component{ render(){ return( <div> <h1>Discussion Board</h1> </div> ); } } I follow the online example to learn react router with webpack but it shows the error:(我按照在线示例学习使用webpack的React Router,但显示了错误:) Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. I cannot find what reason to cause the error.(我找不到导致错误的原因。) Someone said that I might not add the export default but I have already added it.(有人说我可能不会添加导出默认值,但是我已经添加了它。) It is still error.(仍然是错误。)   ask by Michael Tsai translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Your import(您的进口)

import {BrowserRouter as Router, Route} from "react-router"; should be(应该) import {BrowserRouter as Router, Route} from "react-router-dom"; A note from the react-router npm package page:(来自react-router npm软件包页面的注释:) Note: This package provides the core routing functionality for React Router, but you might not want to install it directly.(注意:这个包提供了React Router的核心路由功能,但是您可能不想直接安装它。) If you are writing an application that will run in the browser, you should instead install react-router-dom .(如果要编写将在浏览器中运行的应用程序,则应安装react-router-dom 。) Similarly, if you are writing a React Native application, you should instead install react-router-native .(同样,如果您正在编写React Native应用程序,则应该安装react-router-native 。) Both of those will install react-router as a dependency.(这两个都将安装react-router作为依赖项。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...