मुझे अपने वेब एप्लिकेशन को gh-पृष्ठों पर तैनात करने में कठिनाई हो रही है और मुझे यकीन नहीं है कि मैं कहां गलत हो रहा हूं।

आप लिंक को यहां देख सकते हैं।

स्थानीय रूप से सब कुछ काम करता है, लेकिन मैं अनुमान लगा रहा हूं क्योंकि gh-पृष्ठ एप्लिकेशन को उप-फ़ोल्डर में रखता है मेरी 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>
)

पूरा कोड यहां मिल सकता है।

मैं इसमें गलत कहाँ जा रहा हूँ? मुझे लगता है कि जब भी मेरा कोई मार्ग सीधे जाता है तो आधार पथ बदल जाता है और यह फ़ाइल पथ सापेक्षता के कारण मेरे एसपीए को ठीक से काम करने से रोकता है।

0
James Ives 18 सितंबर 2017, 03:04

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

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 पुनर्निर्देशन

यदि डोमेन पर आपका नियंत्रण नहीं है तो जो थकाऊ हो सकता है

0
Jose Paredes 18 सितंबर 2017, 11:15