У меня есть некоторый код, где я пытаюсь добавить маршрутизацию к файлу индекса. html (который я запускаю, используя liveServer на vscode). Я не понимаю, как правильно «импортировать» требуемые компоненты реакции из реактивного маршрутизатора, который я включил в файл как cdn через тег сценария. Я пытался сравнить мой код с этим сайтом https://reacttraining.com/react-router/web/example/basic. Прямо сейчас я получаю следующую ошибку:
реаги-dom.development. js: 24134 Неопознанная ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция ( для составных компонентов), но получил: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имя.
Вот код, любая помощь будет принята с благодарностью !!
<html>
<head>
<script
src="https://unpkg.com/react@16/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script
crossorigin
src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.1.2/react-router-dom.min.js"
></script>
<body>
<div id="root"></div>
<script type="text/babel">
const { BrowserRouter } = ReactRouterDOM;
const { Router } = ReactRouterDOM.BrowserRouter;
const { Route } = ReactRouterDOM.BrowserRouter;
const { Switch } = ReactRouterDOM.BrowserRouter;
class Home extends React.Component {
render() {
return <div>THIS IS HOME</div>;
}
}
class About extends React.Component {
render() {
return <div>THIS IS THE ABOUT PAGE</div>;
}
}
class Help extends React.Component {
render() {
return <div>THIS IS THE HELP PAGE</div>;
}
}
class App extends React.Component {
render() {
return (
<Router>
<Switch>
<Route exact={true} path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/help">
<Help />
</Route>
</Switch>
</Router>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</head>
</html>