[英]React 4 Router error = type is invalid expected string but got undefined
Have a pretty straight forward React Question, I am trying to do some straight forward routing. 有一个非常简单的React问题,我正在尝试做一些简单的路由。 Home page, profile page, 404 page.
主页,个人资料页面,404页面。 But keep getting the same error.
但是,请保持相同的错误。
My components appear to be working as I have rendered them out successfully, however soon as I try to implement routing I get the following error. 我的组件成功呈现后,它们的组件似乎正在工作,但是,当我尝试实现路由时,立即收到以下错误消息。
Error: 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. Check the render method of Root.
错误:
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. Check the render method of Root.
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. Check the render method of Root.
I have gotten routes to work like this previously (react router v 4.0.0) so Im not sure what mistake I am making here. 我以前已经获得了像这样工作的路由(react router v 4.0.0),所以我不确定我在这里犯了什么错误。 Any push in the right direction would be appreciated.
向正确方向的任何推动将不胜感激。 Thanks in advance.
提前致谢。
App.js App.js
import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';
import { BrowserRouter as Router, Match, Miss } from 'react-router';
//Components
import Home from './components/Home';
import Profile from './components/Profile';
import NotFound from './components/NotFound';
const Routes = () => {
return (
<Router>
<div>
<Match exactly pattern="/" component={Home} />
<Match exactly pattern="/profile/:profileId" component={Profile} />
<Miss component={NotFound} />
</div>
</Router>
)
}
render(<Routes />, document.querySelector('#container'));
Home component 家庭组件
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<p>Home Page</p>
)
}
}
export default Home;
Profile component 配置文件组件
import React, { Component } from 'react';
class Profile extends Component {
render() {
return (
<p>Profile Page</p>
)
}
}
export default Profile;
Package.json 的package.json
"dependencies": {
"html-webpack-plugin": "^2.28.0",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"
}
In App.js you should change this: 在App.js中,您应该更改以下内容:
<Router>
<div>
<Match exactly pattern="/" component={Home} />
<Match exactly pattern="/profile/:profileId" component={Profile} />
<Miss component={NotFound} />
</div>
</Router>
To this 对此
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/profile/:profileId" exact component={Profile}" />
<Route component={NotFound} />
</Switch>
</Router>
The Switch element is used to stop verifying the other routes when one of them has made render. 当其中一个已渲染时,使用Switch元素停止验证其他路由。
And don't forget to import these modules ( Route
, Switch
and BrowserRouter
) from react-router-dom
instead of react-router
. 并且不要忘记从
react-router-dom
而不是react-router
导入这些模块( Route
, Switch
和BrowserRouter
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.