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

问题描述

我的react应用程序在localhost上运行良好，但是当我将其部署到gh-pages中或激增后，它不能使我使用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.

• 这是项目存储库链接
• 演示网址此处

用户可以通过单击右上角的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页面来显示当用户试图移动到断开的链接时的页面.但不在生产中.我尝试了此解决方案，但没有任何改变.

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 )-然后，它将通过用户访问的任何网址(与静态文件都不对应)将其提供给用户，从而使您的应用开始运行.

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.

>code> react-scripts 用户指南在

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屋！