Реактивный маршрутизатор не отображается компонент

Question

var React = require('react'), 
    ReactDOM = require('react-dom'), 
    Router = require('react-router').Router, 
    Route = require('react-router').Route, 
    SiteLanding = require('./components/landing/SiteLanding'), 
    KanbanBoard = require('./components/board/KanbanBoard'), 
    Navigation = require('./components/navigation/Navigation'), 
    bootstrap = require('bootstrap/dist/css/bootstrap.min.css'), 
    fontAwesome = require('font-awesome/css/font-awesome.min.css'); 

class App extends React.Component{ 

    render(){ 
     return (
      <div className="landing-container"> 
       <Navigation /> //Not displayed 
       {this.props.children} 
      </div> 
     ); 
    } 

} 

ReactDOM.render((
    <Router> 
     <Route path="/" component={SiteLanding} /> 
     <Route path="/dashboard" component={KanbanBoard}/> 
    </Router>), document.getElementById('root')); 

module.exports = App; 

Компонент не отображался после использования реагирующего маршрутизатора (отображается только компонент SiteLanding). когда я попытался удалить маршрутизатор и напрямую отнести компонент App, компонент навигации был обработан правильно. Что-то не так с моей конфигурацией маршрутизации

Answer 1

Ваша настройка ретранслятора не будет отображать компонент приложения вообще. Он будет непосредственно отображать SiteLanding в '/' и KanbanBoard на '/ dashboard'. То, что вы хотите в этой ситуации, вероятно, выглядит примерно так:

ReactDOM.render((
    <Router> 
     <Route path="/" component={App} /> 
      <IndexRoute component={SiteLanding} /> 
      <Route path="dashboard" component={KanbanBoard} /> 
     </Route> 
    </Router>), document.getElementById('root')); 

Таким образом, у вас есть корневой компонент (App), который визуализирует на каждом пути, с изменчивостью на дочерних компонентов, передаваемых в него. Обязательно импортируйте компонент IndexRoute вверху, чтобы это работало.

Я бы порекомендовал вам добавить в микс какое-то управление историей URL-адресов - см. https://github.com/reactjs/react-router/blob/latest/docs/Introduction.md для получения дополнительной информации.