反應路由器browserHistory在本地工作，而不是生產

每當我在本地使用browserHistory我沒有問題，但是當我測試它之前我運送它，我得到一個空白頁面的錯誤。所以當我用hashHistory替換browserHistory時，一切正常，但我失去了漂亮的url。反應路由器browserHistory在本地工作，而不是生產

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> 
);

我index.js

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

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

在我app.js

export default class App extends Component { 

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

和我的WebPack文件

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

來源

2016-04-20 caffeinescript

的（http://stackoverflow.com [產地空不被訪問控制允許來源允許]可能的複製/ questions/8456538/origin-null-is-not-access-access-control-allow-origin） – Chris

當你在本地測試時，你是通過網絡服務器運行還是僅僅點擊HTML文件？ – krs

當我在本地運行它時，我在webpack dev服務器上運行它。在我運行webpack並捆綁它之後，我通過單擊index.html文件來測試它 – caffeinescript

我不得不添加一個基礎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> 
);

來源

2016-04-21 09:33:00 caffeinescript

此外，您還需要考慮部署項目的位置。例如，如果你部署到firebase，在firebase.json文件中，你必須添加這個「目標」：「/index.html」代碼。包括這些代碼行後的網址將正常工作

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

}

來源

2017-03-24 11:40:30 Feruza

反應路由器browserHistory在本地工作，而不是生產

回答

相關問題