React JS：我的應用程序正常工作嗎？

Question

我做了一個簡單的待辦事項應用程序鏈接http://todo-app.myartsonline.com/

對於導航，我使用了react-router-dom庫

效果很好，但我的疑問是，當我們轉到應用程序並單擊“ 說明”時 ，效果很好，現在嘗試此鏈接http://todo-app.myartsonline.com/Instruction這將導致錯誤，顯然，由於應用程序已停止運行而發生錯誤還沒有加載！

是/是否是問題/問題，如何解決。 如何直接顯示

我的React導航代碼

    import { Router, Route} from "react-router-dom";
    import history from './history.js';

    <Router history={history}>

    <Container fluid>

        <NavbarComponent />

          <Route path="/" exact component={Home} />
          <Route path="/Streams/list" exact component={StreamList} />
          <Route path="/Streams/new" exact component={StreamCreate} />
          <Route path="/Streams/edit" exact component={StreamEdit} />
          <Route path="/Streams/delete" exact component={StreamDelete} />
          <Route path="/Streams/show/:id" exact component={StreamShow} />
          <Route path="/Instruction" exact component={Instruction} />
          <Route path="/AboutProj" exact component={AboutProj} />
    </Container>

  </Router>

這是我的History.js

    var createHistory = require('history').createBrowserHistory;
     export default createHistory();

Answer 1

我假設您正在使用browserHistory 。

當您轉到此鏈接http://todo-app.myartsonline.com/Instruction ，您的服務器不會返回index.html，因此react路由器不會起作用。 但是，當您轉到http://todo-app.myartsonline.com/並轉到instruction ，這是客戶端路由，服務器不知道此路由。

為了使瀏覽器歷史記錄正常運行，您需要進行服務器端配置。 對於所有請求，請在響應中發送index.html。 這應該是請求順序中的最后一個。

1）配置Express：-

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'))
})

2）配置WebpackDevServer

devServer: {
  historyApiFallback: true
}

希望有幫助！！！