Question

我现在有这个问题一周，但是找不到解决方案。我尝试在Root组件中呈现组件。

index.js文件：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
    Link,
} from 'react-router'

import IndexContent from './components/indexContent';
import IndexHome from './components/indexHome';
import Root from './components/root';


class App extends Component{
  render(){
    return(
      <Router>
        <Root>
          <Route exact path="/" component={IndexContent}/>
          <Route path="/indexhome" component={IndexHome} />
        </Root>
       </Router>
      )
  }
}

export default App;

ReactDOM.render( <App/>, document.getElementById('wrapper'));

root.js文件：

import React,{Component} from 'react';

import NavBar from './NavBar';
import Footer from './footer';

class Root extends Component{
    render(){
        return(
                <div>
                    <NavBar/>
                    {this.props.children}
                    <Footer/>
                </div>
        )
    }
};


export default Root;

indexContent.js文件：

import React,{Component} from 'react';


class IndexContent extends Component{
    render(){
        return(
                <h1>IndexContent</h1>
            )
    }
};



export default IndexContent;

indexHome.js文件：

import React, {Component} from 'react';


class IndexHome extends Component{

    render(){
        return(
            <h1>IndexHome</h1>
        )
    }
}

export default IndexHome;

我得到的错误是：

1）警告： React.createElement：类型无效 - 期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined 。您可能忘记从其定义的文件中导出组件。请检查App的呈现方法。

2）未捕获错误：元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。请检查App的呈现方法。 at invariant（bundle.js：946）在ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent]（bundle.js：12837）在ReactCompositeComponentWrapper.performInitialMount（bundle.js：22340）在ReactCompositeComponentWrapper.mountComponent（bundle.js：22231） at Object.mountComponent（bundle.js：4663）在ReactCompositeComponentWrapper.performInitialMount（bundle.js：22344）在ReactCompositeComponentWrapper.mountComponent（bundle.js：22231） at Object.mountComponent（bundle.js：4663） at mountComponentIntoNode（bundle.js：12047）在ReactReconcileTransaction.perform（bundle.js：7037）

Answer 1

您不需要为App元素实现类。只需将其包装到箭头函数中并传入ReactDom.render

即可

const App = () => (
    <Router>
        <Root>
           <Route exact path="/" component={IndexContent}/>
           <Route path="/indexhome" component={IndexHome} />
        </Root>
    </Router>
);

ReactDOM.render( <App/>, document.getElementById('wrapper'));

Answer 2

我将我的应用程序从我的路线中分离出来，但很容易合并：

Routes.js

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

import App from './Components/App';
import Forgot from './Components/Auth/ForgotPassword';
import Register from './Components/Register/RegisterForm';
import NotFound from './Components/NotFound';
import LoginForm from './Components/Auth/LoginForm';
import Logout from './Components/Auth/Logout';
import Admin from './Components/Admin';
import Dashboard from './Components/Dashboard/Dashboard';


const Routes = (props) => (
    <Router {...props}>
        <Route path="/" component={App}>
            <IndexRoute component={LoginForm}/>
            <Route path="register" component={Register}/>
            <Route path="forgotpassword" component={Forgot}/>
            <Route path="logout" component={Logout}/>
        </Route>
        <Route path="/admin" component={Admin}>
            <IndexRoute component={Dashboard}/>
        </Route>
        <Route path="*" component={NotFound}/>
    </Router>
);

export default Routes;

我的主要应用创建者： index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router';
import Routes from './routes';
import './index.css';


ReactDOM.render(
  <Routes history={browserHistory} />,
  document.getElementById('root')
);

Answer 3

这是工作示例

import React, { Component } from 'react';

var reactRouter = require('react-router')
var Router = reactRouter.Router
var Route = reactRouter.Route
var Link = reactRouter.Link
import { createHashHistory } from 'history'
const history = createHashHistory();


import logo from './logo.svg';
import './App.css';

import IndexContent from './indexContent';
import IndexHome from './indexHome';
import Root from './root';

class App extends Component {
  render() {
    return (
          <Router history={history}>
              <Root>
                <Route exact path='/' component={IndexContent}/>
                <Route path='/indexhome' component={IndexHome} />
              </Root>
          </Router>
    );
  }
}

export default App;

以防万一，package.json

{
  "name": "stackoverflow",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.0"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

尝试在根组件中渲染组件

3 个答案: