リアクションルーティングが機能しない（実行中のアプリケーションで空白のページが表示されます）

Question

アプリケーションを実行すると、エラーなしで空白の表示が表示されます。ルートまたはホームページにはルーティングされません。私はこれが私が反応経路を試したのは初めてですので、誰かが私を助けてくれますか？以下は

私のコードです：

index.js

var React=require('react'); 
import {render} from 'react-dom'; 
import {BrowserRouter, Route} from 'react-router-dom'; 
import {IndexRoute} from 'react-router'; 
import {Header} from './components/Header'; 
import {Home} from './components/Home'; 
import {Root} from './components/Root'; 


class App extends React.Component{ 
    render(){ 
    return(
     <BrowserRouter> 
     <Route path={"/"} component={Root}> 
      <IndexRoute component={Home}/> 
     </Route> 
     </BrowserRouter> 
    ); 
    } 
} 

render(<App/>, window.document.getElementById('app')); 

Root.js

var React=require('react'); 

import {Header} from "./Header"; 
import {Home} from "./Home"; 

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

Home.js

import React from "react"; 

export class Home extends React.Component{ 

    render(){ 
    return(
     <div id="test"> 
     <p> 
      This is a new app. testing 
     </p> 
     </div> 
    ); 
    } 
} 

Answer 1

はあなたの全体のindex.jsの上にこれを貼り付けて試してみてくださいファイルc ontent。

// React. 
import React from 'react' 

// DOM. 
import ReactDOM from 'react-dom' 

// React Router DOM. 
import { 
    BrowserRouter as Router, 
    Switch, 
    Route 
} from 'react-router-dom' 

// Root. 
import { 
    Root 
} from './components/Root'; 

// Home. 
import { 
    Home 
} from './components/Home'; 

// Render. 
ReactDOM.render(
    <Router> 
    <Root> 
     <Switch> 
     <Route path="/" component={Home} exact/> 
     </Switch> 
    </Root> 
    </Router> 
, document.querySelector('#app')) 

私は個人的にはむしろrequireよりも、軒並みimportを使用してインポートします。あなたは2つの戦略の奇妙な組み合わせを持っているようです。

また、Root.jsファイルにはexportというステートメントは含まれていません。

最後に、サイトが現在ダウンしているため、確認できませんが、React Router v4のコンポーネントは'react-router'ではなく、'react-router-dom'からすべてインポートされていると感じています。 <IndexRoute/>はもはや事ではないかもしれません。