Javascript React Router browserHistory适用于本地，而不是生产

每当我在本地使用browserHistory时，我并没有问题，但当我在发布它之前测试它时，我会得到一个带有错误的空白页。因此，当我用hashHistory替换browserHistory时，一切正常，但我丢失了漂亮的url

未捕获的安全性错误：未能对“历史记录”执行“replaceState”：具有URL的历史记录状态对象file:///Users/somefile/work/someproject/index.html无法在来源为“null”且URL为的文档中创建

---

我必须添加一个基本url和指向文件夹的链接。我认为这完全取决于你如何部署

import { createHistory } from 'history'


const history = useRouterHistory(createHistory)({
  basename: '/projectFolder'
})
const Routes = (
  <Router history={history} >

    <Route path="/" component={Login} />
    <Route path="/content" component={App} >
      <Route path="/component1" component={component1} />
      <Route path="/component2" component={component2} />
      <Route path="/component3" component={component3} />
    </Route>
  </Router>
);

从'history'导入{createHistory}
const history=useRouterHistory（createHistory）({
basename:“/projectFolder”
})
常数路由=(
);

您还需要考虑在何处部署项目。例如，如果您部署到firebase，则必须在firebase.json文件中添加以下“目的地”：“/index.html”代码。包含这些代码行后，url将正常工作

firebase.json

{
 "hosting": {       
   "public": "public/dist", 
   "rewrites": [ {
     "source": "**",   
     "destination": "/index.html"  // this line of code is very important, which makes your url work in production. This code means that no matter what url is, direct all processing in index.html
   } ]
 }

}

---

当您在本地测试时，您是通过Web服务器运行它，还是仅仅单击HTML文件？当我在本地运行它时，我在webpack dev服务器上运行它。运行webpack并将其捆绑后，我通过单击index.html文件hi对其进行测试，这个

/projectFolder

路径应该是什么？

export default class App extends Component {

  render() {
    return (
      <div>
      <Header />
      <div className="container-fluid">
        {this.props.children}
        </div>
      </div>
    );
  }
}

var webpack = require('webpack');

module.exports = {
  devtool:'source-map',
  entry: [
    './src/index.js',
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loaders: ['react-hot','babel']
      },
      { test: /\.css$/, loader: "style!css" },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  devServer: {
    port:8080,
    historyApiFallback: true,
    contentBase: './'
  }
};

import { createHistory } from 'history'


const history = useRouterHistory(createHistory)({
  basename: '/projectFolder'
})
const Routes = (
  <Router history={history} >

    <Route path="/" component={Login} />
    <Route path="/content" component={App} >
      <Route path="/component1" component={component1} />
      <Route path="/component2" component={component2} />
      <Route path="/component3" component={component3} />
    </Route>
  </Router>
);

{
 "hosting": {       
   "public": "public/dist", 
   "rewrites": [ {
     "source": "**",   
     "destination": "/index.html"  // this line of code is very important, which makes your url work in production. This code means that no matter what url is, direct all processing in index.html
   } ]
 }

}