Question

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

您可以查看链接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文件中，如果您在这种情况下不拥有整个域<script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg>，为什么使用绝对网址？

将它们替换为使用相对

gh-pages

如果使用<!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'));，则必须处理404，   服务器提供程序中的403重定向

如果您无法控制域
，这会变得单调乏味

将带有react-router的React应用程序部署到gh-pages

1 个答案: