React Redux Router не рендерит ничего в производстве

Question

Это беспокоит меня так сильно, что мне пришлось задать свой первый вопрос по SO. Я создаю приложение React с Redux и пытаюсь использовать React Router. В разработке он работает, как и ожидалось, но как только я его построю, внутри корня div в браузере ничего не отрисовывается Эта проблема началась только после того, как я добавил маршрутизатор. Предыдущие версии dist работали нормально.

Вот код:

index.js

import React from "react"
import ReactDOM from "react-dom"
import Root from "./Root"
import { Provider } from "react-redux"
import PropTypes from 'prop-types'
import store from "./store/store"

ReactDOM.render(
        <Root store={store} />,
    document.getElementById("root")
)

Root.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { Provider } from "react-redux"
import { BrowserRouter as Router, Route } from 'react-router-dom'

const Root = ({ store }) => (
    <Provider store={store}>
        <Router>
            <Route path="/"  component={App}/>  
        </Router>
    </Provider>
)

export default Root;

App.js

import React from "react"
import ReactDOM from "react-dom"
import { hot } from "react-hot-loader";
import * as React from "react";
import { connect } from 'react-redux';

import { bindActionCreators } from 'redux';
import * as actions from './actions/actions';
import  {windowResize} from './actions/windowResize';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    Redirect } from 'react-router-dom'

import HomePage from './views/HomePage';
import ComparePage from './views/ComparePage';
import CartPage from './views/CartPage';
import ProductPage from './views/ProductPage';
import WishlistPage from './views/WishlistPage';

import "./styles/theme.sass";


function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        resize: windowResize
    }, dispatch);
}

class App extends React.Component {
    // eslint-disable-line react/prefer-stateless-function
    constructor(props) {
        super(props);
        this.state = {
            width: window.innerHeight,
            height: window.innerWidth
        }

        this.updateDimensions = this.updateDimensions.bind(this);
    }

    updateDimensions() {
        let w = window,
            d = document,
            documentElement = d.documentElement,
            body = d.getElementsByTagName('body')[0],
            width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
            height = w.innerHeight || documentElement.clientHeight || body.clientHeight;

        this.setState({ width: width, height: height });
        this.props.resize([width, height]);
    }

    //lifecycle methods
    componentWillMount() {
        this.updateDimensions();
    }
    componentDidMount() {
        window.addEventListener("resize", this.updateDimensions);
    }
    componentWillUnmount() {
        window.removeEventListener("resize", this.updateDimensions);
    }
    // - - render - -
    render() {

    return (

            <Switch>
                <Route path="/product" component={ProductPage} />
                <Route path="/compare" component={ComparePage} />
                <Route path="/wishlist" component={WishlistPage} />
                <Route path="/cart" component={CartPage} />
                <Route path="/" exact component={HomePage} />
            </Switch>

        )
    }

}

export default hot(module)(connect(null, mapDispatchToProps)(App))

Я вставляю весь код, так как, возможно, я делаю что-то действительно глупое и не вижу этого. Кажется, я перепробовал все, что мог, включая использование withRouter. В случае, если есть какие-то конфликты, о которых я не знаю, вот соответствующая часть моего package.json

"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-hot-loader": "^4.0.1",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.0",

У меня нет идей о том, что может быть причиной проблемы. В основах роутера или Redux есть кое-что, чего я не совсем понял. Буду признателен за некоторую помощь.

Answer 1

ОК, после того, как вы просмотрели некоторые темы форума и прочитали ссылки, предоставленные @MurliPrajapati и @RaghavGarg, я думаю, что мне удалось решить эту проблему. Как и предполагалось, исправление должно было обеспечить опору basename до BrowserRouter. Так что в App.js измененный render метод теперь выглядит так:

 render() {
        return (
            <Router basename={"my-repo-name"} >
                <Switch>
                    <Route path={"/product"} component={ProductPage} />
                    <Route path={"/compare"} component={ComparePage} />
                    <Route path={"/wishlist"} component={WishlistPage} />
                    <Route path={"/cart"} component={CartPage} />
                    <Route path={"/"} exact component={HomePage} />
                    <Redirect from={"*"} to={"/"} />
                </Switch>
            </Router>
            )
}

Конечно, как отметили @MurliPrajapati и @RaghavGarg, это для производства и развертывания в GH Pages. Если бы я обслуживал приложение из личного домена, в этом не было бы необходимости.

Моя дополнительная мысль может заключаться в том, что не существует простого способа заставить его работать на локальном компьютере после сборки, но он работает при развертывании на Github Pages, так что я думаю, этого достаточно для меня.

Кроме того, чтобы быть в безопасности, я обернул соответствующие компоненты в функцию withRouter из response-router-dom, хотя я не уверен, что это было необходимо.