精縮陣營錯誤反應，同時導航一個組件到另一

，同時實施這裏的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

精縮陣營錯誤反應，同時導航一個組件到另一

回答

相關問題