客戶端陣營，路由器演示：不變違反

我正在關注的陣營，路由器guide 但在瀏覽器控制檯收到此錯誤：客戶端陣營，路由器演示：不變違反

14:14:28.840 Error: Invariant Violation: Element type is invalid: expected 
a string (for built-in components) or a class/function (for composite 
components) but got: undefined.1 react.js:18307:15

我不知道什麼是正確的 - 陣營 - 路由器類被導入並且應該是有效的React類。唯一的區別是我正在加載類 - 客戶端而不是服務器端。

下面是代碼：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.4/ReactRouter.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script> 
    </head> 
    <body> 
    <div id="content"></div> 
    <script type="text/babel"> 
    var Route = window.ReactRouter.Route; 
    var Router = window.ReactRouter.Router; 
    var Link = window.ReactRouter.Link; 
    var DefaultRoute = window.ReactRouter.DefaultRoute; 
    var RouteHandler = window.ReactRouter.RouteHandler; 
    var IndexRoute = window.ReactRouter.IndexRoute; 

    const App = React.createClass({ 
     render() { 
     return (
      <div> 
      <h1>App</h1> 
      <ul> 
       <li><Link to="/about">About</Link></li> 
       <li><Link to="/inbox">Inbox</Link></li> 
      </ul> 
      {this.props.children} 
      </div> 
     ) 
     } 
    }) 

    const About = React.createClass({ 
     render() { 
     return <h3>About</h3> 
     } 
    }) 

    const Inbox = React.createClass({ 
     render() { 
     return (
      <div> 
      <h2>Inbox</h2> 
      {this.props.children || "Welcome to your Inbox"} 
      </div> 
     ) 
     } 
    }) 

    const Message = React.createClass({ 
     render() { 
     return <h3>Message {this.props.params.id}</h3> 
     } 
    }) 
    ReactDOM.render((
     <Router> 
     <Route path="/" component={App}> 
      <Route path="about" component={About} /> 
      <Route path="inbox" component={Inbox}> 
      <Route path="messages/:id" component={Message} /> 
      </Route> 
     </Route> 
     </Router> 
    ), document.getElementById('content')); 
    </script> 
    </body> 
</html>

來源

2015-10-26 David Farrell

你爲什麼混合ES6和ES5語法？ –

browser.js無法識別我的'import'調用（「require is undefined」），所以我使用react-router [介紹]中建議的語法（https://github.com/rackt/react-router #umd） –

爲什麼你使用'const App = React.createClass'而不是'class App extends React.Component'？這是創建課程的首選方法，您應該遵循他們的指示。我也沒有看到任何導入調用，所以編輯你的問題與相關信息 –

發現這個問題：我是用反應路由器與1.0.0語法老（v0.13x）版本。您可以在CDNJS上獲得新版本，或更改版本選擇框以獲得較舊版本。

來源

2015-10-26 20:00:31

我在定製/使用React Redux Starter Kit時也發生過這種情況。

在我的情況，我用的是ES6/2015模塊import語法在一個錯誤的方式（導入命名爲export當我真正需要的默認export）。

當聲明組件時，例如

export default class SomeComponent extends React.Component { 
    render() { 
    return (
     // ... 
    ); 
    } 
} 

SomeComponent.propTypes = { 
    // ... 
};

使用import { SomeComponent } from '<...>/SomeComponent'，而不是的
import SomeComponent from [...]會產生同樣的錯誤。

我的IDE警告過我，但我認爲這只是一些linting錯誤。

即使終極版DevTools便拿起一個undefined元素時不import荷蘭國際集團在所有的（例如只用<SomeComponent>），我會得到同樣的錯誤消息，儘管它無關react-router。

這裏是DevTools錯誤供參考：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of <...>

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of <...>

來源

2016-01-08 07:45:50 Dr1Ku

客戶端陣營，路由器演示：不變違反

回答

相關問題