reactプロジェクトはBrowserRouterを用いてオンラインになった後、ルート以外のルートで404の問題が発生した解決方法をリフレッシュする--Koa

に質問
先にreact Appコードを

class App extends React.Component {
  render() {
    return (
      
        

          to lottery
          
           
in a
} exact />
        
            
    )
  }
}

クリックすると正常にlotteryルーティングにジャンプし、醜いインタフェースを無視することができます...
このときリフレッシュ404はページが見つからない
の原因となる
reactのBrowserRouterはHtml 5が提供する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です.

  

    
      
       
in a
} exact />
       
404  
}>