Rootコンポーネントでレンダリングコンポーネントを試してください

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：タイプが無効です - 文字列を期待（内蔵用（コンポーネントの場合）またはクラス/関数（コンポジットコンポーネントの場合）ですが、未定義です。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れた可能性があります。Appというレンダリング方法を確認してください。

2）未知のエラー：要素の種類が無効です：組み込みコンポーネントの文字列または複合/コンポーネントのクラス/関数が必要ですが、未定義です。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れた可能性があります。Appというレンダリング方法を確認してください。不変（bundle.js：946）で ReactCompositeComponentWrapper.instantiateReactComponentで[_instantiateReactComponentとして（bundle.js：12837） ReactCompositeComponentWrapper.performInitialMountで（bundle.js：22340） ReactCompositeComponentWrapper.mountComponent（bundle.js：22231）でReactCompositeComponentWrapper.performInitialMountで （bundle.js：22344）ReactCompositeComponentWrapper.mountComponentで （bundle.js：22231）Object.mountComponentで （bundle.js：4663） で：Object.mountComponent（4663 bundle.js）で mountComponentIntoNode（bundle.js：12047） at 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; 

パッケージの場合にのみ、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" 
    } 
}