Question

我正在Tomcat的帮助下在ec2-linux实例上运行代码。

当我尝试使用react-router-dom加载组件时，没有加载组件。

这是我的index.html文件

<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>

这是我的webpack.config.json文件

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname,'public'),
        filename: 'bundle.js'
    } ,

    module:{
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        },{
       test:/\.s?css$/,
       use: [
         'style-loader',
         'css-loader',
         'sass-loader'
    ]
    }]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname,'public'),
        historyApiFallback: true
    }
};

这是我的app.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter , Route  } from 'react-router-dom';
import 'normalize.css/normalize.css';
import './styles/styles.scss';

const ExpenseDashBoardPage = () => (
    <div>
        This is from my dashboard component.
    </div>
);

const AddExpensePage = () => (
    <div>
        This is my add expense component.
    </div>
);



const routes = (
    <BrowserRouter>
        <div>
            <Route path="/"  component={ExpenseDashBoardPage} exact={true}/>
            <Route path="/create"  component={AddExpensePage}/>
        </div>
    </BrowserRouter>
);

ReactDOM.render(routes, document.getElementById('app'));

链接的预期输出

http://13.233.125.217/expensify-app/public/

是：这是从我的仪表板组件获得的。

我已经正确了。

但是当我尝试通过提供链接来加载创建页面时：

http://13.233.125.217/expensify-app/public/create

它抛出404错误。

请帮助我解决问题

组件未在Reactjs中加载

0 个答案: