ReactJS:路由配置问题

时间:2017-01-30 10:09:39

标签: reactjs react-router

我是React的新手并做了一些示例应用程序。 我正在查看“ react-router ”的概念,并通过一个例子。

AppHeader.jsx

 import React from 'react';
 import Router from 'react-router';  
 import { Link, Route, RouteHandler } from 'react-router';

 class AppHeader extends React.Component{

  render(){
      return (
            <div>
                <div className="header">
                        <ul>
                        <li><Link to="home">Home</Link></li>    
                        <li><Link to="fundamentals">React-Fundamentals</Link></li>
                            <li><Link to="components">React-Components</Link></li>
                            <li><Link to="flux">React-Flux</Link></li>
                            <li><Link to="babel">React-Babel</Link></li>
                        </ul>
                        <div className="crede-menu">
                                <li><Link to="register">Register</Link></li>
                                <li><Link to="login">Login</Link></li>
                        </div>
                       </div>

                          <center>
                              <RouteHandler></RouteHandler>
                          </center>

                          <div className="footer">
                          <p><center>!copy rights reserved @ 2016</center></p>
                 </div>
            </div>
      )
    }

 }
 export default AppHeader;

app.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import Router from 'react-router/lib/Router';
 import browserHistory from 'react-router/lib/browserHistory';
 import Link from 'react-router/lib/Link';
 import Route from 'react-router/lib/Route';
 import AppHeader from '../jsx/header.jsx';
 import Home from '../jsx/home.jsx';
 import Fundamentals from '../jsx/fundamentals.jsx';
 import Components from '../jsx/components.jsx';
 import Flux from '../jsx/flux.jsx';
 import Babel from '../jsx/babel.jsx';
 import Register from '../jsx/register.jsx';
 import Login from '../jsx/login.jsx';
 var DefaultRoute = Router.DefaultRoute;
 var RouteHandler = Router.RouteHandler;


 var routes = (
     <Route component={AppHeader}>
       <Route path="/" component={Home} />
        <Route path="register" component={Register} />
        <Route path="login" component={Login}/>
        <Route path="fundamentals" component={Fundamentals}/> 
        <Route path="components" component={Components}/>
        <Route path="flux" component={Flux}/>
        <Route path="babel" component={Babel}/>
     </Route>
   );

 /*running the routes*/
  ReactDOM.render(<Router routes={routes} history={browserHistory} />, document.getElementById('reactApp')) 

请在这里帮我解决任何问题。当我运行我的例子时,我会收到如下错误。

 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `AppHeader`.

未捕获错误:元素类型无效:期望字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined。您可能忘记从其定义的文件中导出组件。请检查AppHeader的呈现方法。 folder structure

1 个答案:

答案 0 :(得分:0)

我有同样的问题:React.createElement:type无效 - 期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined。您可能忘记从其定义的文件中导出组件。

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;

var Home = React.createClass({
    render: function(){
        return (
            <div>Welcome !</div>
        );
    }
});

ReactDOM.render((
    <Router>
        <Route path="/" component={Home} />
    </Router>  
), document.getElementById('root'));
相关问题