react專案運用BrowserRouter上線後在非根路由情況下刷新出現404問題的解決方法 -- Koa
摘要：
問題
先上react App程式碼
class App extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<L...
問題
先上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')
})
只要不是以.js結束的路由請求都返回index.html，js型別的就從專案打包出來的靜態資源裡找，相當於把路由的控制權交給了前端。