如何在反應中處理404

Question

如何在React JS中處理不正確的路由404響應並路由到默認根上下文。

我試圖用<Route path='*' component={Home} />，但它不工作和不正確的路徑給404

Answer 1

您需要使用反應路由器的redirect。

你的情況，如果你正在使用/進行路由，但不執行服務器端渲染，那麼你必須響應索引文件的所有請求，這將是<Redirect from="*" to path="/" />

Answer 2

。

router.all('*', (req, res) => { res.response('index'); }) 

，然後在客戶端路由把這個如果你正在使用#不關心的服務器部分

Answer 3

我覺得你應該給多一點點重定向最後

<Redirect from="*" to="/" /> 

信息。你迄今爲止得到的答案提出了你沒有指定的假設。我想知道爲index.html提供什麼服務，以及404是什麼意思。服務器是否給你這個服務？你的路線不匹配？你使用什麼版本的react-router？ webpack dev服務器和/或開發中間件是否混合在一起？

我假設後者扮演一個角色在這裏，但如果需要的話，你指定後更多..會改變我的答案

如果您使用的WebPack-DEV-服務器確保follwing在您的配置文件

devServer: { 
    historyApiFallback: true, <- falls back to index.html if path is not routed 
    publicPath: '/', <- where the bundle is 
} 

確保在配置的WebPack你的輸出已經publicPath

output: { 
    path: path.sesolve(__dirname, 'dist') <- absolute path where the bundle is 
    publicPath: '/' <- makes sure HtmlWebpackPlugin injects '/' before bundle.js in output index.html 
} 

如果你沒有使用HtmlWebpackPlugin然後確保您的index.html引用到'/bundle.js'不只是捆綁。

如果您在節點中使用Webpack-dev-middleware來爲索引和包提供服務，請注意它從內存中提供，而不是任何/ build或/ dist目錄。

如果問題出在react-router上，我不明白404問題。你的意思是它不符合你的任何路線？如果您使用react-router v4確保您有最新的測試版，則最新版本（4.0.0-beta.6）與之前的版本之間會發生一些變化，可能會破壞您期望的功能。

在路由器V4使用這種趕非匹配的路由：

<Switch> 
    <Route exact path="/" component={Home}/> 
    <Route exact path="/someroute" component={SomeComponent}/> 
    <Route component={NoMatchedRouteComponent}/> <- Catches "404" and redirects 
    </Switch> 

也許console.log(this.props.match)在組件看到什麼與你的路由發生..

希望這有助於和請提供一些更多的細節，以便我們可以幫助你更好..