使用react-router将React app部署到gh-pages

Question

我在将我的Web应用程序部署到gh-page时遇到了一些困难，而且我不确定哪里出了问题。

您可以在此处查看链接。

在本地，一切正常，但是我猜是因为gh-pages将应用程序放在子文件夹中，而index.html文件路由引起了问题。 我尝试了多种方法，但似乎无法正常工作。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/style/materialize.css">
    <link rel="stylesheet" href="/style/style.css">
    <script src="/scripts/jquery.js"></script>
    <script src="/scripts/materialize.min.js"></script>

  </head>
  <body>
    <div class="wrapper"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

然后我的路线如下所示：

export default (
    <Route path="/" component={App}>
        <IndexRoute component={Search} />
        <Route path="r/:sub" component={Viewer} />
        <Route path="r/:sub/:filter" component={Viewer} />
        <Route path="r/:sub/:filter/:search" component={Viewer} />
        <Route path="/search" component={Search} />
    </Route>
)

完整的代码可以在这里找到。

我在哪里错呢？ 我感觉无论何时直接访问我的一条路由，基本路径都会更改，并且由于文件路径相对性，它使我的SPA无法正常工作。

Answer 1

在您的index.html文件中，如果在这种情况下您不拥有整个域，那么gh-pages为什么要使用绝对URL？

替换它们以使用相对

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="author" content="James Ives">
    <meta name="description" content="Reddit Viewer SPA">
    <meta name="keywords" content="react, redux, reddit, api, spa">
    <title>React Reddit Viewer</title>

    <link rel="icon" type="image/png" href="./assets/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="./assets/favicon-16x16.png" sizes="16x16" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="./style/materialize.css">
    <link rel="stylesheet" href="./style/style.css">
    <script src="./scripts/jquery.js"></script>
    <script src="./scripts/materialize.min.js"></script>

  </head>
  <body>
    <div class="wrapper"></div>
  </body>
  <script src="./bundle.js"></script>
</html>

而你如果使用将永远有问题browserHistory

再一次，如果您无法控制域，请在您的index.js使用hashHistory代替

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, hashHistory } from 'react-router';
import thunk from 'redux-thunk';
import promise from 'redux-promise';

import routes from './routes';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(
  thunk
)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={hashHistory} routes={routes} />
  </Provider>
  , document.querySelector('.wrapper'));

如果必须使用browserHistory ，则必须在服务器提供商中处理404、403重定向

如果您无法控制域，那么这可能会变得乏味

使用react-router将React app部署到gh-pages

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-18 00:46:02

使用react-router将React app部署到gh-pages

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-18 00:46:02

解决方案1
0 已采纳 2017-09-18 00:46:02