Javascript 页面刷新或手动导航时，Resact不在桌面safari或任何移动（仅限iOS测试）浏览器上渲染

这看起来像是其他几个的复制品。但没有一个解决方案对我有效

通过链接导航效果很好。刷新页面或手动导航仅适用于桌面（chrome和firefox，不适用于Safari）。 在桌面safari和所有iOS浏览器上，它只是在浏览器中显示整个JSON对象，似乎不提供静态文件

我试过路由器、浏览器路由器和哈希路由器。唯一有效的是HashRouter。但是，我不想在url中使用哈希

我没有收到任何错误，而且我已经登录了所有控制台。 当我在getProducts action creator和服务器“/products”路径中放置日志时，Safari不会在浏览器中显示action creator控制台日志。但是，heroku日志显示正在命中path=“/products”，而不是path=“/static/css/main.etc”或path=“/static/js/main.etc”文件

我调查和/或尝试过的事情：

这是一个剥下来的样品。注意：我同时使用代理我的请求

//client/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './styles/index.css';
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import { Router } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import reduxThunk from 'redux-thunk'
import history from './history'

import reducers from './reducers'

const store = createStore(
  reducers,
  applyMiddleware(reduxThunk)
)

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <App />
        </Router>
    </Provider>
    , document.getElementById('root'))
registerServiceWorker();

import createHistory from 'history/createBrowserHistory'
export default createHistory()

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom'
import Home from './components/home'
import Header from './components/header'
import Products from './components/products'
import './styles/App.css'

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={Products} />
          <Route render={() => <p>Not found</p>} />
        </Switch>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as actions from '../actions'
// import ‘../polyfill’ // imported polyfil object from core-js when previously using Object.values below… same results either way…

class Products extends Component {

    componentWillMount() {
        this.props.getProducts()
    }

    renderProducts() {
/*      const { products } = this.props
        return Object.values(products).map((product) => {
        return (
            <li key={product.title}>
                {product.title}
            </li>
        )
        });*/
        const productsArray = []
        const { products } = this.props
        for(let key in products) {
            productsArray.push(<li key={products[key].title} >{products[key].title}</li>)
        }
        return productsArray
    }

    render() {
        if(!this.props.products) {
            return (
                <div></div>
            )
        }

        return (
            <div>
                <ul className="productListItemUl" >{this.renderProducts()}</ul>
            </div>
      )
    }
}

const mapStateToProps = state => {
    return { products: state.products.products }
}

export default connect(mapStateToProps, actions)(Products)

import axios from 'axios'
import {
    GET_PRODUCTS
} from './types'

export function getProducts() {
    return async function(dispatch) {
        try {
            const products = await axios.get('/products')
            dispatch({ type: GET_PRODUCTS, payload: products.data })
        } catch (err) {
            console.log('redux thunk getProducts() action creator error')
            console.log(err)
        }
    }
}

"use strict";

require("babel-core")

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 3050;

const mongoUtil = require('./server/mongoUtil')
mongoUtil.connect()

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();
app.use(jsonParser);

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.resolve(__dirname, 'client/build')));
}

let productsRoute = require('./server/routes/products');
app.use('/products', productsRoute)

app.get('*', function(request, response) {
  response.sendFile(path.resolve(__dirname, 'client/build', 'index.html'));
});

app.listen(port, () => console.log(`Listening on port ${port}.`));

//client/App.js

import React from 'react'
import ReactDOM from 'react-dom'
import './styles/index.css';
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import { Router } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import reduxThunk from 'redux-thunk'
import history from './history'

import reducers from './reducers'

const store = createStore(
  reducers,
  applyMiddleware(reduxThunk)
)

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <App />
        </Router>
    </Provider>
    , document.getElementById('root'))
registerServiceWorker();

import createHistory from 'history/createBrowserHistory'
export default createHistory()

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom'
import Home from './components/home'
import Header from './components/header'
import Products from './components/products'
import './styles/App.css'

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={Products} />
          <Route render={() => <p>Not found</p>} />
        </Switch>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as actions from '../actions'
// import ‘../polyfill’ // imported polyfil object from core-js when previously using Object.values below… same results either way…

class Products extends Component {

    componentWillMount() {
        this.props.getProducts()
    }

    renderProducts() {
/*      const { products } = this.props
        return Object.values(products).map((product) => {
        return (
            <li key={product.title}>
                {product.title}
            </li>
        )
        });*/
        const productsArray = []
        const { products } = this.props
        for(let key in products) {
            productsArray.push(<li key={products[key].title} >{products[key].title}</li>)
        }
        return productsArray
    }

    render() {
        if(!this.props.products) {
            return (
                <div></div>
            )
        }

        return (
            <div>
                <ul className="productListItemUl" >{this.renderProducts()}</ul>
            </div>
      )
    }
}

const mapStateToProps = state => {
    return { products: state.products.products }
}

export default connect(mapStateToProps, actions)(Products)

import axios from 'axios'
import {
    GET_PRODUCTS
} from './types'

export function getProducts() {
    return async function(dispatch) {
        try {
            const products = await axios.get('/products')
            dispatch({ type: GET_PRODUCTS, payload: products.data })
        } catch (err) {
            console.log('redux thunk getProducts() action creator error')
            console.log(err)
        }
    }
}

"use strict";

require("babel-core")

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 3050;

const mongoUtil = require('./server/mongoUtil')
mongoUtil.connect()

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();
app.use(jsonParser);

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.resolve(__dirname, 'client/build')));
}

let productsRoute = require('./server/routes/products');
app.use('/products', productsRoute)

app.get('*', function(request, response) {
  response.sendFile(path.resolve(__dirname, 'client/build', 'index.html'));
});

app.listen(port, () => console.log(`Listening on port ${port}.`));

//server.js

import React from 'react'
import ReactDOM from 'react-dom'
import './styles/index.css';
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import { Router } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import reduxThunk from 'redux-thunk'
import history from './history'

import reducers from './reducers'

const store = createStore(
  reducers,
  applyMiddleware(reduxThunk)
)

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <App />
        </Router>
    </Provider>
    , document.getElementById('root'))
registerServiceWorker();

import createHistory from 'history/createBrowserHistory'
export default createHistory()

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom'
import Home from './components/home'
import Header from './components/header'
import Products from './components/products'
import './styles/App.css'

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={Products} />
          <Route render={() => <p>Not found</p>} />
        </Switch>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as actions from '../actions'
// import ‘../polyfill’ // imported polyfil object from core-js when previously using Object.values below… same results either way…

class Products extends Component {

    componentWillMount() {
        this.props.getProducts()
    }

    renderProducts() {
/*      const { products } = this.props
        return Object.values(products).map((product) => {
        return (
            <li key={product.title}>
                {product.title}
            </li>
        )
        });*/
        const productsArray = []
        const { products } = this.props
        for(let key in products) {
            productsArray.push(<li key={products[key].title} >{products[key].title}</li>)
        }
        return productsArray
    }

    render() {
        if(!this.props.products) {
            return (
                <div></div>
            )
        }

        return (
            <div>
                <ul className="productListItemUl" >{this.renderProducts()}</ul>
            </div>
      )
    }
}

const mapStateToProps = state => {
    return { products: state.products.products }
}

export default connect(mapStateToProps, actions)(Products)

import axios from 'axios'
import {
    GET_PRODUCTS
} from './types'

export function getProducts() {
    return async function(dispatch) {
        try {
            const products = await axios.get('/products')
            dispatch({ type: GET_PRODUCTS, payload: products.data })
        } catch (err) {
            console.log('redux thunk getProducts() action creator error')
            console.log(err)
        }
    }
}

"use strict";

require("babel-core")

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 3050;

const mongoUtil = require('./server/mongoUtil')
mongoUtil.connect()

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();
app.use(jsonParser);

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.resolve(__dirname, 'client/build')));
}

let productsRoute = require('./server/routes/products');
app.use('/products', productsRoute)

app.get('*', function(request, response) {
  response.sendFile(path.resolve(__dirname, 'client/build', 'index.html'));
});

app.listen(port, () => console.log(`Listening on port ${port}.`));

---

对于任何有类似经历的人来说：我最终将我的服务器和客户端应用程序分开，并分别部署到heroku，现在一切正常。所以我想我可能只是没有在heroku上正确设置一些东西来让代理正常工作，或者可能它根本就不好用。我不确定，也没有进一步研究它，但现在它可以工作了，因为我已经分别部署了客户机和服务器。