React Router browserHistory 适用于本地，而不适用于生产 [英] React Router browserHistory works on local, not on production

问题描述

每当我在本地使用 browserHistory 时，我都没有问题，但是当我在发货前对其进行测试时，我得到一个带有错误的空白页面.因此，当我用 hashHistory 替换 browserHistory 时，一切正常，但我丢失了漂亮的 url.

<块引用>

未捕获的安全错误:无法在历史"上执行replaceState":无法在原点为的文档"中创建 URL 为file:///Users/somefile/work/someproject/index.html"的历史状态对象null' 和 URL.

const 路由 = (<路由器历史={browserHistory}><Route path="/" component={Login}/><Route path="/content" component={App} ><Route path="/component1" component={component1}/><Route path="/component2" component={component2}/><Route path="/component3" component={component3}/></路线></路由器>);

在我的 index.js 中

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);const store = createStoreWithMiddleware(reducers);ReactDOM.render(<提供者商店={商店}>{路线}</提供者>,document.querySelector('.react-internal'))

在我的 app.js 中

export default class App extends Component {使成为() {返回 (<div><标题/><div className="容器流体">{this.props.children}

);}}

和我的 webpack 文件

var webpack = require('webpack');模块.出口 = {开发工具:'源地图'，入口: ['./src/index.js',],输出: {路径:__目录名，公共路径:'/'，文件名:'bundle.js'},模块: {装载机: [{排除:/node_modules/，loader: ['react-hot','babel']},{ 测试:/\.css$/, 加载器: "style!css" },{测试:/\.(jpe?g|png|gif|svg)$/i,装载机: ['file?hash=sha512&digest=hex&name=[hash].[ext]','image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false']}]},解决: {扩展名:['', '.js', '.jsx']},开发服务器:{端口:8080，historyApiFallback: 真,内容库:'./'}};

解决方案

此外，您还需要考虑您在哪里部署项目.例如，如果你部署到 firebase，你必须在 firebase.json 文件中添加这个 "destination": "/index.html" 代码.包含这些代码行后，网址将正常工作

firebase.json

<代码>{主持":{"public": "public/dist",重写":[ {来源": "**"，"destination": "/index.html"//这行代码很重要，它让你的 url 在生产中工作.这段代码的意思是不管url是什么，都直接在index.html里面处理]]}}

Whenever I use browserHistory on local i have no issues, but when i test it before I ship it i get a blank page with the error. So when i replace browserHistory with hashHistory everything works fine, but i lose the pretty url.

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///Users/somefile/work/someproject/index.html' cannot be created in a document with origin 'null' and URL.

const Routes = (
  <Router history={browserHistory}>
    <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>
);

in my index.js

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
const store = createStoreWithMiddleware(reducers);

ReactDOM.render(
  <Provider store={store}>
  {Routes}
  </Provider>,
  document.querySelector('.react-internal')
)

in my app.js

export default class App extends Component {

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

and my webpack file

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: './'
  }
};

解决方案

Also you need to take into account where u r deploying the project. For example, if u deploy to firebase, in firebase.json file you have to add this "destination": "/index.html" code. After including these line of code the url will work fine

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

}

这篇关于React Router browserHistory 适用于本地，而不适用于生产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！