はJSに反応 - 現在、私が読ん例は一種のある反応-ルータを

Question

に複数のインポートを避ける：

import Home from './components/Home'; 
import About from './components/About '; 
import Login from './components/Login '; 
//... 
import 404 from './components/404'; 

<Router history={browserHistory}> 
    <Route path='/' component={Home}> 
    <Route path='login' component={login} /> 
    <Route path='about' component={about} /> 
    ... 
    <Route path='404' component={404} /> 
    <AssembliesRoutes /> 
    </Route> 
</Router> 

私はreact-routerにスケールするか、意味、複数の輸入を避ける方法を知りたいですか？

Answer 1

一つの方法は、お使いの部品の輸出最適化することができます

ルート：

index.js

export { default as Home } from './Home' 
export { default as About } from './About ' 
export { default as Login } from './Login ' 
export { default as 404 } from './404' 

そのように、あなただけの名前のエクスポートを参照することができます.js

import { Home, About, Login, 404 } from './components' 

<Router history={browserHistory}> 
    ... 
</Router> 

Answer 2

注：私は@ルクスの答え

について理解するための一つの重要なことでコメントに基づいてこの答えを書いていますルータ（V2/3）<Route>コンポーネントは、彼らが何をレンダリングしていないということである反応します。これらは単に設定オブジェクトを構築するために使用されます。

<Route path="login" component={Login} /> 

は、オブジェクトに変換されます：

{ 
    path: "login", 
    component: Login 
} 

また、独自のroutesオブジェクトを作成し、routes小道具を使って<Router>にそれを渡すことができます。

<Router routes={routes} history={browserHistory} /> 

これを知っていると、各コンポーネントからルートオブジェクトをエクスポートしてルートオブジェクトを作成することができます。

// dashboard/profile.js 
class Profile extends React.Component {...} 
export default { 
    path: 'profile', 
    component: Profile 
} 

あなたのルートのそれぞれについて、そのような何かをした後、dashboard/index.jsファイルに：

// dashboard/index.js 
import ProfileRoute from './profile' 
// etc. 

export default { 
    path: 'dashboard', 
    component: Dashboard, 
    childRoutes: [ 
    ProfileRoute 
    ... 
    ] 
} 

あなたはそれらは主routeを作成するために一緒にそのエクスポートされたオブジェクトだけでなく、他のルートオブジェクトを構成することができあなたが<Router>に渡すオブジェクト。