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

Question

I'm having a bit of a hard time deploying my web application to gh-pages and I'm not sure where I'm going wrong. 我在将我的Web应用程序部署到gh-page时遇到了一些困难，而且我不确定哪里出了问题。

You can view the link here . 您可以在此处查看链接。

Locally everything works, but I'm guessing because gh-pages puts the application in a sub-folder my index.html file routing is causing issues. 在本地，一切正常，但是我猜是因为gh-pages将应用程序放在子文件夹中，而index.html文件路由引起了问题。 I've tried a number of ways but I can't seem to get it working. 我尝试了多种方法，但似乎无法正常工作。

<!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>

And then my routes look like this: 然后我的路线如下所示：

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

The full code can be found here . 完整的代码可以在这里找到。

Where am I going wrong with this? 我在哪里错呢？ I feel like the base path changes whenever one of my routes is visited directly and it prevents my SPA from working properly because of file path relativity. 我感觉无论何时直接访问我的一条路由，基本路径都会更改，并且由于文件路径相对性，它使我的SPA无法正常工作。

Answer 1

In your index.html file, if you don't own the whole domain in this case gh-pages why you are using absolute URLs? 在您的index.html文件中，如果在这种情况下您不拥有整个域，那么gh-pages为什么要使用绝对URL？

Replace them to use relative 替换它们以使用相对

<!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>

And you will always have problems if you use browserHistory 而你如果使用将永远有问题browserHistory

Once again if you don't have control over the domain use hashHistory instead in your index.js 再一次，如果您无法控制域，请在您的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 如果必须使用browserHistory ，则必须在服务器提供商中处理404、403重定向

Which can become tedious if you don't have control over the domain 如果您无法控制域，那么这可能会变得乏味

使用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