导航一个部件到花药时反应误差的减小
在实现react-routing时，我得到了这个错误--这里是我的代码http://codepen.io/anon/pen/VmOgyy?editors=1010
错误
react.min.js:16 Uncaught Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at r (react.min.js:16)
at p.a [as _instantiateReactComponent] (react.min.js:16)
at performInitialMount (react.min.js:13)
at p.mountComponent (react.min.js:13)
at Object.mountComponent (react.min.js:15)
at i (react.min.js:14)
at r.perform (react.min.js:16)
at s (react.min.js:14)
at r.perform (react.min.js:16)
at Object.batchedUpdates (react.min.js:14)你能告诉我为什么会出现这个错误吗？
var Router = ReactRouter;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var browserHistory = Router.browserHistory;
var RouteHandler = Router.RouteHandler;
class First extends React.Component {
render() {
return <h1>Hello word</h1>;
}
}
class Second extends React.Component {
render() {
return <h1>Second</h1>;
}
}
ReactDOM.render( <Router history={browserHistory}>
<Route path="/" component={First}/>
</Router>,document.getElementById('root')
)回答 5
Stack Overflow用户
发布于 2016-12-26 05:32:17
错误发生的原因是模块的development and production environment版本之间存在冲突。您在代码页中使用的react-router实例是一个development version，包含完整的错误消息。就像医生说的
在React的小型化生产构建中，为了减少通过线路发送的字节数，我们避免发送完全错误消息。 我们强烈建议在调试应用程序时在本地使用开发生成。
要解决错误，请使用non-minified版本的react和react。
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js和
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.jsStack Overflow用户
发布于 2016-12-26 05:51:34
切换到react的非缩小版本之后，您将看到实际的错误：
未定义错误:元素类型无效:期望字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。
这是因为您使用的是ReactRouter v4.0，它具有不同的API
在v4中没有Router或Routes组件。相反，您可以使用BrowserRouter和Match组件。在您的案例代码中，如下所示：
const {
BrowserRouter,
Match,
Link
} = ReactRouter
class First extends React.Component {
render() {
return <h1>Hello word!</h1>;
}
}
class Second extends React.Component {
render() {
return <h1>Second</h1>;
}
}
ReactDOM.render(
<BrowserRouter>
<div>
<Link to='/'>First</Link>
<Link to='/second'>Second</Link>
<Match exactly pattern="/" component={First} />
<Match pattern="/second" component={Second} />
</div>
</BrowserRouter>, document.getElementById('root')
)react路由器v4：https://react-router.now.sh/basic文档
Stack Overflow用户
发布于 2017-01-02 12:05:50
要解决此错误，可以使用react和react的非小型化版本。
请执行以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Router Bug Report</title>
<script src="https://npmcdn.com/react@0.14.2/dist/react.js" charset="utf-8"></script>
<script src="https://npmcdn.com/react-dom@0.14.2/dist/react-dom.js" charset="utf-8"></script>
<script src="https://npmcdn.com/react-router@2.0.0/umd/ReactRouter.js" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Jscode----
const {
Router,
Route,
IndexRoute,
Redirect,
Link,
browserHistory,
IndexLink
} = ReactRouter
class First extends React.Component {
constructor(){
super();
this.state = {
username: "",
}
// click hander
this.handleClick = this.handleClick.bind(this);
this.onChangeHandler = this.onChangeHandler.bind(this);
}
handleClick(e){
//alert(this.state.username)
}
onChangeHandler (e){
console.log(e.target.value);
this.setState({
username :e.target.value
})
}
render() {
return (
<div>
<h1>First</h1>
<input type="text" onChange={this.onChangeHandler}/>
{this.state.username}
<Link to="/second" ><button onClick={this.handleClick}>send data</button></Link>
</div>
);
}
}
class Second extends React.Component {
render() {
return (
<h1>Second</h1>
);
}
}
ReactDOM.render((
<Router>
<Route path="/" component={First}/>
<Route path="/second" component={Second}/>
</Router>
), document.getElementById('app'))https://stackoverflow.com/questions/41326639
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号