react-router在生产和浪涌部署中不起作用

Question

我的react应用程序在localhost上运行正常,但是当我在gh-pages中部署它或者激增之后它不会让我在使用URL的页面之间移动.

• 这是项目回购链接
• 演示网址在这里

用户可以通过单击右上角的menuItem进入注册页面.但如果用户使用http://chat.susi.ai/signup/ URL,则会显示404页面

我尝试了几种来自互联网的解决方案,但没有用.

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

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

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')
);

如果有人可以为我的问题建议使用示例代码的良好解决方案,这对我来说真的很有帮助.

Answer 1

在构建文件夹中用作 Web 服务器.htaccess的情况下更改文件apache对我有用：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Answer 2

发生这种情况的原因是index.html,当用户直接访问这些网址时,不会为用户提供引导.

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

编辑:看起来像你正在使用create-react-app.这工作,因为当你在本地开发create-react-app的react-scripts包处理服务你index.html为这些请求回退.

的react-scripts用户指南对部分如何部署到GitHub的页数时处理这种和surge.sh(如上).

Answer 3

此问题发生在所有单页应用程序上（例如 React、Angular）。按照以下步骤解决（仅4次浪涌）：

1. npm run build
2. cd build
3. cp index.html 200.html
4. surge