使用 Typescript 的 React Router Dom 无法获取答案

【问题标题】：React Router Dom with Typescript cannot GET使用 Typescript 的 React Router Dom 无法获取
【发布时间】：2018-02-12 11:36:10
【问题描述】：

我有一个基于 TS 的简单 React 项目并使用 webpack。我的问题是路由器没问题，一切都正确重定向并且工作正常，但是当我刷新页面时，我有无法获取错误。

index.tsx

ReactDOM.render(
<div>
  <Router>
    <div className="App">
      <Route exact path='/' component={Lessons}/> 
      <Route path='/watch/:name' component={CurrentLesson}/>      
    </div>
  </Router>
</div>,
document.getElementById("example"));

webpack.config.js

module.exports = {
entry: "./src/index.tsx",
output: {
    filename: "bundle.js",
    path: __dirname + "/dist",
    publicPath: '/'
},

plugins: [
  new webpack.HotModuleReplacementPlugin()
],

devtool: "source-map",

resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
},

module: {
    loaders: [
        {
          test: /\.tsx?$/, 
          loader: "awesome-typescript-loader"
        }
      ]
},

externals: {
    "react": "React",
    "react-dom": "ReactDOM"
},

devServer: {
  historyApiFallback: true,
  hot: true
}};

我读到历史可能存在问题，但对于 webpack，建议是放置 output.PublicPath 和 devServer.historyApiFallback 并让反应路由器传递历史对象，但由于我使用反应路由器 dom，它已经有一个历史对象还有一点是，当我在纯 ES6 上编写完全相同的项目时，没有那种糟糕的废话，一切正常。我已经安装了@types/react-router-dom 4.0.x 版本和 react-router-dom 4.x.x 版本

为什么刷新时我得到无法获取 /watch/some-param

【问题讨论】：

标签： javascript reactjs webpack react-router

【解决方案1】：

问题在于客户端与服务器端路由。导航到前端的路由（使用react-router 路由）与在浏览器的地址栏中输入该 URL（或在页面上刷新该地址）不同。

这已经在 SO 和其他在线其他地方的一百万个其他帖子中得到解决，因此请查看“react-router 中的客户端与服务器端路由”

【讨论】：

【解决方案2】：

非常感谢 Jayce444，我找到了带有你给我的句子的文章，我发现：

React-router urls don't work when refreshing or writting manually

这非常有帮助。问题是我启动 webpack 并在刷新时或在浏览器中手动输入 URL 时，React Router 和 React 被重置，来自浏览器的第一个请求被发送到后端。

在我的情况下，我启动 TS + React to Webpack，当路由器仍未加载时，它无法在第一个请求时向我发送 index.html。

但是当只使用 React 时，我通过 react-scripts 启动它，该脚本具有针对这种情况的处理程序，并且每次在路由器重置时刷新时，react-scripts 都会向我发送 index.html

搜索语句“react-router 中的客户端与服务器端路由”的大感谢

【讨论】：