精缩阵营错误反应，同时导航一个组件到另一

，同时实施这里的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') 
)

来源

2016-12-26 user944513

这似乎并非是ReactNative代码ReactRouter V4.0。你能否删除'react-native'标签。 – sheepdog

那么错误发生是因为之间的冲突版本的模块。您在codepen中使用的react-router实例是development version，并包含完整的错误消息。而作为阵营文档说

In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.

We highly recommend using the development build locally when debugging your app since

为了解决这个错误，使用的non-minified版本的反应和反应-DOM的

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js

和

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js

来源

2016-12-26 05:32:17

仍然无法使用http://codepen.io/anon/pen/MbdLxe?editors=1010 – user944513

使用此cdn https://cdnjs.cloudflare.com/ajax/libs/react-router/2.0.0/ReactRouter.js –

是的，它工作在jsbin和codepen。但http://jsbin.com/zuvilaxosa/edit?html,js,output ..为什么它不移动到下一个组件，而使用'链接' – user944513

切换到非minified的版本后的反应，你会看到实际的错误：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

而且它的发生是因为您正在使用的有不同的API

V4中没有Router或Routes组件..而是使用BrowserRouter和Match组件ReactRouter V4.0。在你的情况的代码是这样的：

的反应路由器V4

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') 
)

文档：https://react-router.now.sh/basic

来源

2016-12-26 05:51:34

出现此错误是因为你的模块的开发和生产环境的版本之间有冲突的。您在代码中使用的实例是开发版本，并包含完整的错误消息。为了解决这个错误，你可以使用反应和反应-DOM

来源

2017-01-02 11:37:07

的非缩小的版本，为了解决这个错误，你可以使用反应和反应-DOM的非精缩版

请执行以下代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>React Router Bug Report</title> 
<script src="https://npmcdn.com/[email protected]/dist/react.js" charset="utf-8"></script> 
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js" charset="utf-8"></script> 
<script src="https://npmcdn.com/[email protected]/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'))

来源

2017-01-02 12:05:50

这是因为您正在使用的有不同的API

来源

2017-01-02 14:03:00

精缩阵营错误反应，同时导航一个组件到另一

回答

相关问题