React-Router子路由未顯示

Question

似乎當webpack構建文件時，輸出只能看到主卡div，而其中的任何內容都看不到。 我不確定在npm react-scripts啟動時運行時缺少什么。 我不確定webpack缺少什么才能正確呈現。 我正在嘗試將其加載到S3存儲桶中，因此必須與Webpack一起打包。

import React from 'react';
import { connect } from 'react-redux';
import { Route, withRouter } from 'react-router-dom';

import { fetchUserList } from "../actions/UserActions";
import { fetchSkillList } from "../actions/SkillActions";

import WelcomeCard from "./WelcomeCard";
import UserSearchCard from "./UserSearchCard";
import AddUserCard from './AddUserCard';

import '../styles/MainCard.css';

class MainCard extends React.Component {
    componentDidMount() {
        this.props.fetchUserList();
        this.props.fetchSkillList();
    }

    render() {
        return (
            <div className="main_card">
                <Route exact path='/' component={WelcomeCard}/>
                <Route path='/list' component={UserSearchCard}/>
                <Route path='/new' component={AddUserCard}/>
            </div>
        );
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchUserList: () => dispatch(fetchUserList()),
        fetchSkillList: () => dispatch(fetchSkillList())
    }
};

export default withRouter( connect(undefined, mapDispatchToProps)(MainCard) );

Webpack配置：

let path = require('path');
let webpack = require('webpack');
const publicPath = '/dist/build/';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    //Content
    entry: './src/index.js',
    mode: 'development',
    // A SourceMap without column-mappings ignoring loaded Source Maps.
    devtool: 'cheap-module-source-map',
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        }),
        //simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.
        new HtmlWebpackPlugin({
            title: 'Talent Identification Manager'
        }),
        //Auto replacement of page when i save some file, even css
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],

    output: {
        path: path.join(__dirname, publicPath),
        filename: 'main.bundle-0.0.1.js',
        publicPath: "/",
        sourceMapFilename: 'main.map',
    },

    devServer: {
        port: 3000,
        host: 'localhost',
        //Be possible go back pressing the "back" button at chrome
        historyApiFallback: true,
        noInfo: false,
        stats: 'minimal',
        publicPath: publicPath,
        contentBase: path.join(__dirname, publicPath),
        //hotmodulereplacementeplugin
        hot: true
    },
    module: {

        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules(?!\/webpack-dev-server)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-2'],
                    plugins: ['syntax-decorators']
                }
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

Answer 1

React Router不知道您想將/talentidbucket當作站點的基礎，因此您已經通過在生產環境中將基本路徑作為BrowserRouter組件的basename傳遞來明確地告訴它。

class App extends React.Component {
  render() {
    return (
      <BrowserRouter basename="/talentidbucket"> {/* ... */} </BrowserRouter>
    );
  }
}