response-web-ar - Компонент рендеринга, содержащий AFrameRenderer, выдает ошибку Uncaught

Question

У меня есть два компонента Home.js и View.js. Мой View.js возвращает JSX с тегом AframeRenderer. Я хочу отображать компонент View.js всякий раз, когда пользователь щелкает параметр Click Me в компоненте Home.js.

Ниже приведен снимок кодов из App.js, Home.js и View.js

Код выдает ошибку всякий раз, когда веб-сайт пытается открыть localhost:3000/view страницу

Ошибка говорит о следующем:

Uncaught Ошибка: недопустимый тип элемента: ожидается a строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получили: undefined. Вероятно, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте метод рендеринга 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;