React-router zagnieżdzone śnieżki

varmanpl

2017-03-07 19:06

~~varmanpl~~2017-03-07 19:06

Rejestracja:ponad 10 lat
Ostatnio:ponad 3 lata
Lokalizacja:Kraków
Postów:60

Cześć,
Mam problem z tym kodem, nie wiem czemu nie działa poprawnie routing wchodząc na /test /second ładuje się tylko Main i ma props.children na undefined, jak wyrzucę zagnieżdżone śnieżki na zewnątrz to działa.

Kopiuj

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

import {
  BrowserRouter as Router,
  Route,
  Link,
  hashHistory
} from 'react-router-dom'

class App extends Component {

  render() {
    return (
      <Router history={hashHistory}>
            <Route path="/" component={Main} > //chodzi o to
              <Route path="/test" component={Test} />
              <Route path="/second" component={Second} />
            </Route>
      </Router>
    );
  }
}

class Main extends Component {
  render(){
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </div>
        <p className="App-intro">
          {this.props.children}
        </p>
      </div>
    )
  }
}

class Test extends Component {
  render(){
    return (
      <div>
        <h3>I am test</h3>
        {this.props.children}
      </div>
    )
  }
}

class Second extends Component {
  render(){
    return (
      <div>
        <h3>I am second</h3>
        {this.props.children}
      </div>
    )
  }
}

export default App;