react项目运用BrowserRouter上线后在非根路由情况下刷新出现404问题的解决方法 -- Koa

栏目: Node.js · 发布时间: 5年前

内容简介:先上react App代码点击后可以正常跳转至lottery路由,忽略丑陋的界面...

问题

先上react App代码

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Link to="/lottery">to lottery</Link>
          <Route path="/lottery" component={Lottery} exact />
          <Route path="/a" render={() => <div>in a</div>} exact />
        </div>
      </BrowserRouter>      
    )
  }
}

react项目运用BrowserRouter上线后在非根路由情况下刷新出现404问题的解决方法 -- Koa

点击后可以正常跳转至lottery路由,忽略丑陋的界面...

react项目运用BrowserRouter上线后在非根路由情况下刷新出现404问题的解决方法 -- Koa

这时刷新就404找不到页面了

react项目运用BrowserRouter上线后在非根路由情况下刷新出现404问题的解决方法 -- Koa

原因

react的BrowserRouter用的是Html5提供的HistoryApi方法,Link组件实际上是调用了History.pushState(),然后通过监听history状态去展示或者隐藏组件。所以当刷新时,也就是向服务器发送了这个路径的请求,而服务器上实际是没有对这个路径的请求做任何处理的,故返回的是404。

解决方法 -- 用的是koa搭建服务器

app.use(views(path.resolve(__dirname, '../www/dist'), {extension: 'html'}))
app.use(async (ctx, next) => {
  console.log(ctx.path)
  await next()
})

app.use(router.routes())
router.all(/\.js/i, static(path.resolve(__dirname, '../www/dist')))
router.all('*', async ctx => {
  await ctx.render('index')
})

只要不是以.js结束的路由请求都返回index.html,js类型的就从项目打包出来的静态资源里找,相当于把路由的控制权交给了前端。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTTP Developer's Handbook

HTTP Developer's Handbook

Chris Shiflett / Sams Publishing / 2003-3-29 / USD 39.99

The largest group with an unsatisfied demand for a good book on HTTP is the worldwide group of Web developers. A good book on HTTP can help new and old Web developers alike, as a thorough understandin......一起来看看 《HTTP Developer's Handbook》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具