react-router 在生产和浪涌部署中不起作用 [英] react-router does not work in production and surge deployments

问题描述

我的 React 应用程序在 localhost 上运行良好，但是当我将它部署到 gh-pages 或 Surge 后，它不会让我使用 URL 在页面之间移动.

My react application is working fine on localhost but when after i deployed it in gh-pages or surge it does not give me to move among pages using URL.

• 这是项目仓库 link
• 演示网址这里

用户可以通过点击右上角的menuItem进入注册页面.但是如果用户使用 http://chat.susi.ai/signup/ URL，它会给出 404 页面

users can go to signup page by clicking menuItem of top right corner. but If user use http://chat.susi.ai/signup/ URL, it gives 404 page

我从互联网上尝试了几种解决方案，但没有奏效.

I tried several solutions from internet but didn't work.

下一个问题是:我创建了一个 404 页面以在用户尝试移动到损坏的链接时显示.它在 localhost 中工作正常.但不在生产中.我尝试了这个解决方案，但没有任何改变.

Next question is : I created a 404 page to show up when user tries to move to broken links.It works fine in localhost. but not in production. I tried this solution but nothing changed.

这是我的 index.js 文件的一部分

this is part of my index.js file

const App = () => (
    <Router history={hashHistory}>
        <MuiThemeProvider>
            <Switch>
                <Route exact path="/" component={ChatApp} />
                <Route exact path="/signup" component={SignUp} />
                <Route exact path="/logout" component={Logout} />
                <Route exact path="/forgotpwd" component={ForgotPassword} />
                <Route exact path="*" component={NotFound} />

            </Switch>
        </MuiThemeProvider>
    </Router>
);

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

如果有人可以为我的问题提出带有示例代码的好的解决方案，那对我真的很有帮助.

If someone can suggest good solution with sample code for my problems that would be really helpful for me.

推荐答案

发生这种情况是因为用户没有得到 index.html 的服务，当他们直接访问这些 URL 时，它会引导您的应用程序.

This is happening because users aren't being served the index.html which bootstraps your app when they visit those URLs directly.

对于激增，您可以添加200.html 文件，其中包含与您正在部署的 index.html 相同的内容(或者只是将其重命名为 200.html)- 然后，这将在用户访问的任何与静态文件不对应的 URL 上提供给用户，从而允许您的应用开始运行.

For surge, you can add a 200.html file which contains the same contents as the index.html you're deploying (or just rename it to 200.html) - this will then be served to users at any URL they visit which doesn't correspond to a static file, allowing your app to start running.

看起来您正在使用 create-react-app.这在您在本地开发时有效，因为 create-react-app 的 react-scripts 包将您的 index.html 作为后备处理对于这些请求.

looks like you're using create-react-app. This works when you're developing locally because create-react-app's react-scripts package handles serving your index.html as a fallback for these requests.

react-scripts 用户指南 有关于 在部署到 GitHub 页面时如何处理这个问题 和 surge.sh(如上).

The react-scripts user guide has sections on how to handle this when deploying to GitHub Pages and surge.sh (as above).

这篇关于react-router 在生产和浪涌部署中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！