小编Dar*_*lie的帖子

我一直在使用一种收集组件文件的模式，以便将index.js文件放在目录中进行导出，例如：

// index.js file in /components directory
export { Splash } from './Splash'
export { Portfolio } from './Porfolio'
export { Contact } from './Contact'

在Layout.js（位于根目录中）我可以通过一个调用整齐地导入：

import { Splash, Portfolio, Contact } from '.'

当我跨目录和子目录构建组件时，我经常使用这种模式。

我的具体问题是问是否有任何方法可以将此模式扩展到收集的图像资产src/assets/img？我可以index.js在我的图像目录中放置一个文件并能够将图像组调用到组件吗？

//index.js in /src/assets/img directory
export { Img01 } from './img-01.png'
export { Img02 } from './img-02.jpg'
export { Img03 } from './img-03.svg'

//Call in Component.js
import { Img01, Img02, Img03 } from '../assets/img'

我认为这应该是可以实现的，但我无法弄清楚此模式所需的正确语法或修改。任何代码示例或更好的实践建议表示赞赏。提前致谢！

（为清晰起见更新）我的应用程序具有以下结构：

<Layout />
  /components/
    <Header /> 
    <Navigation />
    <Stage />
    <Footer />
  /pages/
    <Home />
    <About />
    <Contact />

我的想法是将<Navigation>元素隔离，并导入到父级<Header>（以及后来的站点地图）中。然后将所有组件暂存到父级中<Layout>，该父级被送入<div id="root">

我的 /pages/ 组件的内容被成功调用并使用以下代码呈现。但是，此页面内容呈现在我的<header>元素内部，打破了页面层次结构。

我的目的是让<Switch>设备在<Stage>父组件中呈现 /pages/组件。

任何将<Switch>元素移动到<Stage>组件的尝试都会导致整个应用程序无法加载/渲染。

import React from 'react';

import {
  BrowserRouter as Router, Route, Link, Switch
} from 'react-router-dom';


import Home from './../pages/Home';
import About from './../pages/About';
import Contact from './../pages/Contact';

export default class Navigation extends React.Component {
  render() …