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'

这样，您就可以引用指定的导出：

<强> Route.js

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

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

Answer 2

注意：我根据@ lux的答案中的评论写这个答案

了解React Router（v2 / 3）<Route>组件的一个重要事项是它们不会呈现任何内容。它们仅用于构建配置对象。

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

将转换为对象：

{
  path: "login",
  component: Login
}

您还可以创建自己的routes对象，并使用<Router>道具将其传递给routes。

<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>。

React JS - 避免在react-router中进行多次导入

2 个答案: