Javascript react web ar-包含AFrameRenderer的渲染组件出现未捕获错误

我有两个组件

Home.js

和

View.js

。 My

View.js

返回带有

AframeRenderer

标记的JSX。 每当用户单击

Home.js

组件中的

Click Me

选项时，我想呈现

View.js

组件

下面是来自

App.js

、

Home.js

和

View.js

每当网站试图打开

localhost:3000/view

页面时，该代码都会出错

错误说明如下：

未捕获错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

检查

视图

的渲染方法

App.js

：

import Home from './Home/Home'
import View from './View/View'

class App extends Component {
        render() {
                return(
                        <BrowserRouter>
                                <div className = "App">
                                        <Switch>
                                                <Route path = '/' exact component = {Home} />
                                                <Route path = '/view' exact component = {View} />
                                        </Switch>
                                </div>
                        
                        </BrowserRouter>
        );
    }
}

export default App;

import View from '../View/View'

class Home extends Component{
        render() {
                return (
                        <Link to =  { {
                                pathname: '/view/'
                          } } >
                            Click Me
                        </Link>
                );
        }
}
export default Home;

class View extends Component {
        render() {
                return (
                        <AFrameRenderer arToolKit = {{sourceType: 'webcam'} } >
                                <Marker parameters = {{ preset : 'hiro'}} >
                                        <a-box color="blue" material = "opacity: 1;"position="0 0.9 0" scale="0.4 0.8 0.8">
                                                <a-animation attribute="rotation" to="360 0 0" dur="5000" easing="linear" repeat = "indefinite" />
                                        </a-box>
                                </Marker>
                        </AFrameRenderer>
                );
        }
}

export default View;

View.js

：

import Home from './Home/Home'
import View from './View/View'

class App extends Component {
        render() {
                return(
                        <BrowserRouter>
                                <div className = "App">
                                        <Switch>
                                                <Route path = '/' exact component = {Home} />
                                                <Route path = '/view' exact component = {View} />
                                        </Switch>
                                </div>
                        
                        </BrowserRouter>
        );
    }
}

export default App;

import View from '../View/View'

class Home extends Component{
        render() {
                return (
                        <Link to =  { {
                                pathname: '/view/'
                          } } >
                            Click Me
                        </Link>
                );
        }
}
export default Home;

class View extends Component {
        render() {
                return (
                        <AFrameRenderer arToolKit = {{sourceType: 'webcam'} } >
                                <Marker parameters = {{ preset : 'hiro'}} >
                                        <a-box color="blue" material = "opacity: 1;"position="0 0.9 0" scale="0.4 0.8 0.8">
                                                <a-animation attribute="rotation" to="360 0 0" dur="5000" easing="linear" repeat = "indefinite" />
                                        </a-box>
                                </Marker>
                        </AFrameRenderer>
                );
        }
}

export default View;

类视图扩展组件{
render（）{
返回(
);
}
}
导出默认视图；