如何使用react-router設置默認的子路由？

我正在使用React-Router 1.0.0-rc3，但我無法理解如何爲子路由設置默認路由。如何使用react-router設置默認的子路由？

我有一個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);

我的控制檯根組件的設置如下：

module.exports = React.createClass({ 

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

});

我的文件管理路由定義如下：

module.exports = { 
    path: 'files', 

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

我的目標是控制檯組件始終被加載，而其任何c hild路線處於活動狀態。它將包含一個基於子路由的子組件。我想要異步加載子組件。如果沒有選擇子路由，我希望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子路由默認子路由？

來源

2015-10-15 crush

我強烈建議您爲您的路線使用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> 
)

來源

2015-10-15 19:35:01 Chiedo

我剛纔讀到[IndexRoute（https://github.com/rackt/react-router/blob/master/docs/API。md＃indexroute）並且覺得自己並沒有意識到這實質上是早期版本的DefaultRoute。我會在勸告下提出您的JSX建議。謝謝。 – crush

這是你所需要的：

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

在情況下，如果你選擇<IndexRoute>和您router.isActive(path)或<Link to="other" activeClassName="blabla"/>使用這條路線裏面的一些視覺指示，將無法正常工作，或者您需要添加額外的條件來檢查使其工作。

所以我最喜歡<IndexRedirect>。

來源

2017-01-11 11:06:37 ixrock

如何使用react-router設置默認的子路由？

回答

相關問題