javascript - Minified React error in react while navigation one component to anther - Stack Overflow

admin管理员组

文章数量:1208155

I am getting this error while implementing the react-routing here is my code

Error

react.min.js:16 Uncaught Error: Minified React error #130; visit .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)

Could you please tell me why it is showing this error

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

I am getting this error while implementing the react-routing here is my code http://codepen.io/anon/pen/VmOgyy?editors=1010

Error

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)

Could you please tell me why it is showing this error

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

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Dec 28, 2016 at 9:03 suman j 6,9601212 gold badges6161 silver badges117117 bronze badges asked Dec 26, 2016 at 5:06 user944513user944513 12.7k5151 gold badges185185 silver badges346346 bronze badges 0

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 6

Well the error occurs because of the conflict between the development and production environment versions of your modules. The react-router instance that you are using in your codepen is a development version and contains the full error messages. And as the React Docs say

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

To solve the error, use the non-minified version of react and react-dom

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

and

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

After switching to non minified version of react you will see actual error:

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

And it's happens because you are using ReactRouter v4.0 which has different API

In v4 there is no Router or Routes components.. Instead you use BrowserRouter and Match components. In your case code would look like this:

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

Documentation for react-router v4: https://react-router.now.sh/basic

To solve this error, you can use non-minified versions of react and react-dom

Please execute the code below:

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

This error occurs because of a conflict between the development and production environment versions of your modules. The instance you are using in your code is a development version and contains the full error messages. To solve this error, you can use non-minified version of react and react-dom

This happens because you are using ReactRouter v4.0 which has different API

本文标签： javascriptMinified React error in react while navigation one component to antherStack Overflow