2017-09-04 89 views
0

我有一個簡單的基於TS的反應項目,並使用webpack。我的問題是,路由器是好的,一切都正確的重定向和工作正常,但是當我刷新頁面我有無法獲取錯誤。React路由器Dom與Typescript不能GET

index.tsx

ReactDOM.render(
<div> 
    <Router> 
    <div className="App"> 
     <Route exact path='/' component={Lessons}/> 
     <Route path='/watch/:name' component={CurrentLesson}/>  
    </div> 
    </Router> 
</div>, 
document.getElementById("example")); 

webpack.config.js

module.exports = { 
entry: "./src/index.tsx", 
output: { 
    filename: "bundle.js", 
    path: __dirname + "/dist", 
    publicPath: '/' 
}, 

plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
], 

devtool: "source-map", 

resolve: { 
    extensions: [".ts", ".tsx", ".js", ".json"] 
}, 

module: { 
    loaders: [ 
     { 
      test: /\.tsx?$/, 
      loader: "awesome-typescript-loader" 
     } 
     ] 
}, 

externals: { 
    "react": "React", 
    "react-dom": "ReactDOM" 
}, 

devServer: { 
    historyApiFallback: true, 
    hot: true 
}}; 

我看可能是有問題的歷史,但爲的WebPack的建議是把output.PublicPath和devServer .historyApiFallback和爲反應路由器傳遞歷史對象,但因爲我使用反應路由器DOM它已經有一個歷史對象和其他東西是,當我編寫完全相同的項目在純ES6沒有這樣的shity類型廢話一切正常。我已經istalled @類型/反應路由器-DOM 4.0.x的版本和反應路由器-DOM 4.XX版本

爲什麼當刷新我拿到拿不到/手錶/一些-PARAM

回答

0

的問題是客戶端與服務器端路由。導航到前端的路由(使用react-router路由)與將該URL輸入到瀏覽器的地址欄(或在頁面上時刷新該地址)並不相同。

這已經在一百萬的帖子在這裏SO和其他地方得到解決網上,這樣看看到「客戶端VS服務器端路由的反應,路由器

0

感謝名單了很多Jayce444,我發現文章用句你給了我,我發現:

React-router urls don't work when refreshing or writting manually

這是非常有幫助的。問題是,我啓動webpack,刷新或在瀏覽器中手動輸入URL,React Router和React被重置,並且來自瀏覽器的第一個請求被髮送到後端。

在我的情況下,我開始TS + React到Webpack,它無法處理,當路由器仍然沒有加載時,向第一個請求發送index.html。

但是,當使用才反應過來我啓動它通過反應,腳本,有這種情況,當路由器reseted上刷新每一次處理和反應的腳本給我的index.html

大thanx的搜索句子「客戶端與服務器端路由反應路由器」