javascript - react JS : Does my Application work correctly?

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/然后路由到指令时，这是客户端路由，服务器不知道这条路由.

要使浏览器历史记录正常工作，您需要进行服务器端配置。对于所有请求，在响应中发送 index.html。这应该是请求顺序中的最后一个。

1) 配置 Express:-

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

2) 配置WebpackDevServer

devServer: {
  historyApiFallback: true
}

希望对您有所帮助!!!