javascript - React-Router 子路由不显示

Question

似乎当 webpack 构建文件时，输出只能看到 maincard div 而看不到其中的任何内容。我不确定在 npm react-scripts start 运行时缺少什么，它可以正常工作。我不确定 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) );

网络包配置：

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'
                ]
            }
        ]
    }
}

标签： javascriptreactjswebpackreact-router

Answer 1

React Router 不知道您想将其/talentidbucket视为站点的基础，因此您通过将基础路径作为生产组件的basenameprop传递明确地告诉它。BrowserRouter

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