1

我有两个组件Home.js和View.js. 我View.js返回一个带有AframeRenderer标签的 JSX。View.js每当用户单击组件中的Click Me选项时，我都想渲染Home.js组件。

下面是来自App.js,Home.js和的代码的快照View.js

每当网站尝试打开localhost:3000/view页面时，代码都会出错

错误如下：

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

检查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;

Home.js：

import View from '../View/View'

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

View.js：

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;
4

0 回答 0