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

拼搏现实的明天。 2022-03-06 23:58 550阅读 0赞

### 问题 ###

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

![clipboard.png][]

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

![clipboard.png][clipboard.png 1]

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

![clipboard.png][clipboard.png 2]

### 原因 ###

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>

[clipboard.png]: /images/20220307/c0ee50f5ac684f0697581a8c502f4bc0.png
[clipboard.png 1]: /images/20220307/dfaee6a1e6ee46299c7d93d5cfe61337.png
[clipboard.png 2]: /images/20220307/fcdc39b5ad4e4b8d9b6edbb3b20beb4a.png