反应路由器白屏

Question

Using a similar React-Route from a previous project that worked but this one just gives a white screen, if i make a nav link in the root directory it changes the path but stays white. not sure why the content is not loading in. also have the code on repo: repo with code

index.js

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

import App from './App';
import Test from './components/test';
import Home from './pages/home_page';
import './index.css';

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={Home}/>
      <Route path='/test' component={Test} />
    </Route>
  </Router>
), document.getElementById('app'))

App.js

import React, { Component } from 'react';
import './App.css';

export default class App extends Component {
  render() {
    return (
      <div>
       {this.props.childen}
      </div>
    );
  }
}

Just adding that the console has no errors and says it was compiled correctly with no warnings. The url does change but the content is not loaded to the page.

Answer 1

I cloned your repo and discovered the issue - it's a typo in App.js

{this.props.childen} -> {this.props.children}

It works now.