Estou usando reagir roteador com o carregamento lento de componentes e usando Webpack como uma bundler , Quando eu acesso ao home page /
eu posso ver na guia de rede que o bundle.js
está carregado e também quando eu clicar em um item específico na barra lateral do componente correspondente é carregado com sucesso com seu nome de arquivo, por exemplo 0.bundle.js
, no entanto, quando navego diretamente da barra de pesquisa para uma rota aninhada (exemplo http://127.0.0.1:8080/forms/select
), recebo um erro como este:
GET
http://127.0.0.1:8080/forms/bundle.js
net :: ERR_ABORTED 404 (Não encontrado)
Este erro indica que bundle.js
não está carregado, o que significa que não pode carregar os outros pedaços.
webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
module: {
rules: [],
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js',
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: true,
},
};
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
routes.js
import { lazy } from 'react';
const Forms = lazy(() => import('../components/uiViews/Forms'));
const SelectForm = lazy(() => import('../components/uiViews/Forms/SelectForm'));
const FormValidation = lazy(() => import('../components/uiViews/Forms/FormValidation'));
const routes = [
{
icon: 'form',
label: 'forms',
path: '/forms',
component: Forms,
children: [
{
icon: 'select',
label: 'selectInput',
path: '/forms/select',
component: SelectForm,
},
{ icon: 'issues-close', label: 'formValidation', path: '/forms/validation', component: FormValidation },
{
icon: 'form',
label: 'wizardForm',
path: '/forms/wizard',
component: WizardForm,
}],
},
];
export default routes;
renderização de rotas
<Suspense fallback={<div className="spin-loading"> <Spin size="large" /></div>}>
{routes.map((route, i) => {
return route.component ? RouteWithSubRoutes( {...route},`r${i}`) : null;
})}
</Suspense>
....
function RouteWithSubRoutes(route,key) {
return route.children ? (
route.children.map((subRoute,j) => {
return RouteWithSubRoutes(subRoute,`sr${j}`);
})
) : (
<Route key={key} path={route.path} exact component={() =>route.component? <route.component />:<ComingSoon/>} />
);
}
publicPath
,entry
e / ououtput
caminhos, precisa de umpath.resolve()
ou dois lá dentro.