我使用React.lazy和嵌套路由。
当我转到/items/any时遇到此错误：
拒绝应用“ http://localhost:8000/items/css/main.css”中的样式 因为它的MIME类型（'text / html'）不是受支持的样式表MIME 类型，并启用严格的MIME检查。
问题出在路径上，文件位于http://localhost:8000/css/main.css而非http://localhost:8000/**items**/css/main.css
如何解决？ 我不确定，但是我认为使用webpack可以解决该问题。
导航
import React,{ Suspense } from 'react';
import { BrowserRouter,Switch,Route } from 'react-router-dom';
import Loading from '../components/Loading';
// import Item from '../screens/Item'; // working!
const Item = React.lazy(() => import('../screens/Item')); // don't working
const Navigation = () => (
<BrowserRouter>
...
<Route path="/items/:id">
<Item />
</Route>
...
</BrowserRouter>
);
export default Navigation;
webpack.config
module.exports = (env,options) => {
const isDevMode = options.mode === 'development';
const dist = path.join(__dirname,'dist');
const src = path.join(__dirname,'src');
return {
stats: 'minimal',context: src,entry: './index.js',output: {
path: dist,filename: 'js/[name].js',chunkFilename: 'js/[name].js',},devtool: isDevMode && 'source-map',devserver: {
public: 'http://localhost:8000/',publicPath: 'http://localhost:8000/',contentBase: './',historyApiFallback: true,port: 8000,overlay: true,plugins: [
new CleanWebpackPlugin(),new HtmlPlugin({
template: 'index.html',}),new MiniCssExtractPlugin({
filename: 'css/[name].css',chunkFilename: 'css/[name].css',ignoreOrder: false,// Enable to remove warnings about conflicting order
}),],...
};
};