React-router не может найти компоненты других страниц в приложении

Question

Я пытаюсь настроить тестовый компонент, который в основном представляет собой панель навигации и два компонента для навигации. Это то, что он выглядит следующим образом:

class Page1 extends Component{ 
    render(){ 
    return (<div>Page1</div>); 
    } 
} 

class Page2 extends Component{ 
    render(){ 
    return (<div>Page222</div>); 
    } 
} 

class App extends Component{ 
    render(){ 
     console.log('children: ', this.props.children); 
    return(
     <div> 
     <NavigationBar/> 

     {this.props.children} 
     </div> 

    ); 
    } 
} 

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route component={App} > 
     <Route path="/" component={App}/> 
     <Route path="page1" component={Page1}/> 
     <Route path="page2" component={Page2}/> 
    </Route> 
</Router>, 
    document.getElementById("app") 
); 

Панель навигации только общие самозагрузки Navbar который появляется штрафом. Проблема, которую я имею, когда я перемещаться (или нажмите на кнопку стр.1 или PAGE2), я получаю сообщение:

Не можете получить/стр.1

Даже несмотря на то, компонентов и маршрутизация все настроено и связывает себя тоже, кажется, все в порядке.

Следует также упомянуть, что this.props.children также является нулевым.

Любые идеи о том, что я делаю неправильно?

Answer 1

Добавить path="/" в начало App Маршрут. Кроме того, вы дважды создаете компонент App в своей конфигурации. Это не сработает. Вы должны изменить его на:

class Page1 extends Component{ 
    render(){ 
    return (<div>Page1</div>); 
    } 
} 

class Page2 extends Component{ 
    render(){ 
    return (<div>Page222</div>); 
    } 
} 

class Home extends Component { 
    render(){ 
     return(<h1>I AM HOME</h1>); 
    } 
} 

class App extends Component{ 
    render(){ 
    console.log('children: ', this.props.children); 
    return(
     <div> 
     <NavigationBar/> 

     {this.props.children} 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <Router history={browserHistory}> 
     <Route path="/" component={App} > 
     <IndexRoute component={Home} /> //Being a different component 
     <Route path="page1" component={Page1}/> 
     <Route path="page2" component={Page2}/> 
     </Route> 
    </Router>, 
    document.getElementById("app") 
);