React JS - 避免在 react-router 中多次导入答案

【问题标题】：React JS - avoid multiple imports in react-routerReact JS - 避免在 react-router 中多次导入
【发布时间】：2017-01-12 14:24:10
【问题描述】：

目前我读到的例子是这样的：

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 进行扩展？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案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'

这样，您就可以只引用命名的导出：

Route.js

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

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

【讨论】：

但是当你有一个更复杂的结构时？我的意思是：dashboard/home、dashboard/profile、dashboard/settings？我可以在仪表板主页内创建一个包含所有路由的组件吗？在 Angular2 中，我曾经为每个高阶组件及其子组件分隔路由
哦，就像导出一个完全限定的Route 组件，比如(<Route path='login' component={login} />)，然后导入它？这是一种有趣的方法，我不明白为什么它不起作用。我想拥有“大量”路线文件的好处是您可以查看所有单独的路线，而不是可能不得不导航到不同的导入以查看Routes 你得到了什么.但值得一试！

【解决方案2】：

注意：我是根据@lux 的答案中的 cmets 来写这个答案的

了解 React Router (v2/3) <Route> 组件的重要一点是它们不渲染任何东西。它们只是用于构建配置对象。

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

将转化为对象：

{
  path: "login",
  component: Login
}

您还可以创建自己的 routes 对象并使用 routesprop 将其传递给您的 <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
    ...
  ]
}

您可以将导出的对象和其他路由对象组合在一起，以创建您将传递给您的<Router> 的主要route 对象。

【讨论】：