在React Router中创建共享链接

Question

我目前正在研究app.wavetv.co

当有人转到新页面时，URL为app.wavetv.co/（频道名称）。但是，当我尝试刷新此页面时，它说找不到页面。我正在使用React Router来处理导航和Netlify作为托管。不知道我在这里做错了什么，因为让他们共享这些链接很重要。

代码如下：

https://github.com/wave-tv/wave-tv/blob/master/src/pages/channels.js

Answer 1

为了做到这一点，您需要使用SSR（服务器端渲染）（也称为同构），我建议您访问Next.js，这是一个非常好的框架，可以创建一个准备就绪的ssr react app。与create-react-app类似，因此您不必处理webpack和其他烦人的事情。

Answer 2

问题在于，第一个调用GET / some_path应该像<SomePathComponent />时尝试下载<Index><SomePathComponent /></Index>，因为服务器上没有处理该请求的逻辑（因为应该使用React Router做到）

哈希历史 想法是在网址根末尾附加＃，此后的任何内容都不会发送到服务器。因此，如果URL是happ.wavetv.co/#/path，浏览器将向app.wavetv.co发出GET请求，取回所有JavaScript，然后React Router将加载，查看/ path并显示正确的视图对于那条路线。 React Router提供了一个HashRouter组件供您使用，它将为您提供基于哈希的路由。

Answer 3

将此添加到webpack.config.js：

devServer: {
    historyApiFallback: true
}