Question

我有一个基于TS的简单反应项目并使用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和反应路由器传递给历史对象但是因为我使用react router dom它已经有了一个历史对象还有别的就是当我在纯ES6上编写完全相同的项目而没有那种shity类型废话时一切正常。我有@styles / react-router-dom 4.0.x版本和react-router-dom 4.x.x版本

为什么刷新时我得到的不能GET / watch / some-param

Answer 1

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

这已经在SO上和其他地方的其他一百万个帖子中得到了解决，因此请查看react-router＆＃39;

中的客户端与服务器端路由。

Answer 2

Thanx很多Jayce444，我找到了你给我的句子的文章，我发现：

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

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

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

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

用于搜索句子“反应路由器中的客户端与服务器端路由”的Big Thanx

使用Typescript的React Router Dom无法获取

2 个答案: