Как установить дочерний маршрут по умолчанию с помощью ретранслятора?

Question

Я использую React-Router 1.0.0-rc3, но мне трудно понять, как я могу установить маршрут по умолчанию для дочернего маршрута.

У меня есть rootRoute установку следующим образом:

var rootRoute = { 
    component: 'div', 
    childRoutes: [{ 
     path: '/', 
     component: require('./components/Console'), 
     childRoutes: [ 
      require('./routes/FileManager'), 
      require('./routes/UserManager') 
     ] 
    }] 
}; 

React.render(<Router routes={rootRoute}/>, document.body); 

My Console корневой компонент настроен следующим образом:

module.exports = React.createClass({ 

    render: function() { 
     return (
      <div className="console"> 
       <ConsoleHeader/> 
       {this.props.children} 
      </div> 
     ); 
    } 

}); 

Мой FileManager определение маршрута следующим образом:

module.exports = { 
    path: 'files', 

    getComponent: function (location, callback) { 
     callback(null, require('./components/FileManager')); 
    } 
}; 

Моя цель состоит в том, чтобы компонент Console всегда загружался, а любой из его c hild маршруты активны. Он будет содержать дочерний компонент на основе дочернего маршрута. Я хочу, чтобы дочерние компоненты загружались асинхронно. Я хочу, чтобы дочерний маршрут FileManager также был по умолчанию, если дочерний маршрут не выбран.

Так следующие два маршрута будет как выбрать компонент FileManager:

/ 
/files 

Я понимаю, один из способов сделать это было бы сделать что-то вроде этого:

{this.props.children || require('./routes/FileManager/components/FileManager')} 

Это не чувствует право, однако. Я не хочу использовать этот путь к компоненту FileManager из файла определения маршрута.

Возможно, я мог бы создать запись маршрута по умолчанию как ребенок:

{ 
    path: '/', //Or maybe empty string here since it concatenates to the parent? 
    getComponent: function (location, callback) { 
     callback(null, require('./components/FileManager')); 
    } 
} 

Но это по существу то же определение маршрута, у меня уже есть, кроме как с другой путь.

Таким образом, кажется, что должен быть более чистый способ указания дочернего маршрута по умолчанию, но я не могу понять его даже после просмотра API documentation.

Как я могу настроить дочерний маршрут по умолчанию для дочернего маршрута FileManager?

Answer 1

Я настоятельно рекомендую использовать JSX для ваших маршрутов. Это упростит работу.

Ниже приведен пример.

var ConsoleApp = require('./components/Console'); 
var FileManager = require('./routes/FileManager'); 
var UserManager = require('./routes/UserManager'); 
var RootDefault = require(./routes/SomeComponent); 

var rootRoute = (
    <Route path="/" component={ConsoleApp}> 
    <IndexRoute component={RootDefault}/> 
    <Route path="file-manager" component={FileManager}/> 
    <Route path="user-manager" component={UserManager}/> 
    </Route> 
) 

Answer 2

Это то, что вам нужно:

<IndexRoute to="sub-path"/> <IndexRedirect to="sub-path">

В случае, если Вы выбираете <IndexRoute> и использовать внутри этого маршрута некоторые визуальные указания по router.isActive(path) или <Link to="other" activeClassName="blabla"/> он не будет работать или вам нужно чтобы добавить дополнительное условие, чтобы проверить, чтобы он работал.

Так что я предпочитаю <IndexRedirect>.

Подробнее: https://github.com/ReactTraining/react-router/blob/master/docs/guides/IndexRoutes.md