如何在React JS中处理错误的路由404响应并路由到默认的根上下文。
我尝试使用<Route path='*' component={Home} />
,但它不起作用,并且错误的路径给出了404.
答案 0 :(得分:5)
我认为你应该提供更多信息。到目前为止你得到的答案做了你没有指定的假设。我想知道什么是index.html,你对404有什么意义。服务器给你这个吗?你的路线不匹配吗?你使用什么版本的react-router?混合使用webpack开发服务器和/或开发中间件吗?
我假设后者在这里扮演一个角色,但是如果你需要指定更多的话,我会改变我的答案..
如果您使用webpack-dev-server,请确保以下内容位于您的配置文件中
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引用了&#39; /bundle.js'不只是捆绑。
如果你在节点中使用Webpack-dev-middleware来提供索引和bundle,请注意它从内存而不是任何/ 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)
看到您的路由发生了什么......
希望这有所帮助,请提供更多细节,以便我们为您提供更好的帮助..
答案 1 :(得分:2)
您需要使用反应路由器的redirect
。
在您的情况下,它将是<Redirect from="*" to path="/" />
答案 2 :(得分:0)
如果您使用/
进行路由但未实现服务器端呈现,则必须为所有请求响应索引文件。
router.all('*', (req, res) => { res.response('index'); } )
然后在你的客户端路由中将此重定向放在最后
<Redirect from="*" to="/" />
如果您使用的是#
,请不要关心服务器部分