@r1al1t

Как динамически загрузить страницу через react router?

Есть файлы: index.jsx, alias.jsx
Из Router пытаюсь загрузить компонент Alias (alias.jsx), но выдает ошибку

index.jsx
.....

const Alias2 = React.lazy(() => import('./Alias'));

export default function(props) {
	return (
		<Router>
			<TestLinks />
			<Switch>
				<Route path="/about">
					<Aboute/>
				</Route>
				<Route exact path="/podkatalog/:alias.php" component={Alias} />
			</Switch>
		</Router>
	);
}

function Alias(props){
	
	return (
		<div>
			
			<Suspense fallback={<div>Загрузка...</div>}>
				<Alias2 />
			</Suspense>
		</div>
	)
}


в webpack прописано:
...
module:{
  	rules:[
  		{
	      test: /\.js|jsx$/,
	      exclude: /(node_modules)/,
	      use: {
	        loader: 'babel-loader',
	        options: {
	          presets: [
	          	[	'@babel/preset-env', 
	          	], [
	          		'@babel/preset-react'
	          	]
	          ],
	          plugins: [
	          	"@babel/plugin-syntax-dynamic-import"
	          ]
	        }
	      }
	    },
...


webpack генерирует файл 1.js в котором находиться компонент Alias, но при нажатие на ссылку выдает ошибки
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы