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

本文介绍如何解决React应用中BrowserRouter导致的刷新404错误，通过配置koa服务器和使用Switch组件来正确处理前端路由，确保刷新页面时能正常加载。

问题

先上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>      
    )
  }
}

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

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

原因

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')
})

这里需要注意的是koa-views提供的render方法是异步的，所以要用await，否则也是返回404，相当于对路由没有进行任何处理。

只要不是以.js结束的路由请求都返回index.html，js类型的就从项目打包出来的静态资源里找，相当于把路由的控制权交给了前端。
前端react App只需要对匹配不到的路由做下处理就ok了。

<BrowserRouter>
  <div>
    <Switch>
      <Route path="/lottery" component={Lottery} exact />
      <Route path="/a" render={() => <div>in a</div>} exact />
      <Route render={() => <div>404页面</div>}></Route>
    </Switch>
  </div>
</BrowserRouter>