使用 react-router 将 React 应用程序部署到 gh-pages

Question

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

您可以查看 link here.

本地一切正常，但我猜是因为 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>
)

可以找到完整代码 here。

我哪里出错了？我觉得每当我的其中一条路线被直接访问时，基本路径就会发生变化，并且由于文件路径相关性，它会阻止我的 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'));

If using browserHistory is a must, then you will have to deal with 404, 403 redirections in your server provider

Which can become tedious if you don't have control over the domain

使用 react-router 将 React 应用程序部署到 gh-pages

Deploying React app with react-router to gh-pages

github-pages

reactjs

webpack

react-router