SRA - Single Page React App - when hosted to GitHub, doesn't load Component which stores 'switch' router code












2















I have searched everywhere for the answer to this one - and I'm pretty sure it's the way I've laid out my Components in my React app:



In making my Portfolio page in React, I used CREATE REACT APP and after it was finished and functioning perfectly locally, I made the necessary changes to the package.json file for homepage and build, etc. Then when I deployed using Yarn, the host link would open my site - but without one of my components: CONTENT. This component contains a switch that, according to the route, will show the proper content in the body of the page containing that route.



When I click on the navbar, it will then take me to any of the three routes - including a properly displayed home page - but the home will only show after the page first loads and you click on the Navbar.



Why is this? Again - it works locally just fine, but on GH Pages, will only show the Header, NavBar and Footer for the home page on first load.



Thanks,



Rideout



See code below:



Hosted URL on GH Pages:



https://operasinger.github.io/VRideout-Portfolio-React/



Partial Package.json:



"homepage": "http://operasinger.github.io/VRideout-Portfolio-React/",
"name": "vrideout-portfolio-react",
"scripts": {
"predeploy": "yarn run build",
"deploy": "gh-pages -d build"
},


App.js:



import React, { Component } from "react";
// import { Link } from "react-router-dom";
// import './Fonts.css';
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/navbar";
import Content from "./components/content";

class App extends Component {
render() {
return (
<div className="App container-fluid" id="background">
<div className="container">
<div className="row jumbotronNavy">
<div className="col-md-4 blue" id="headBlue">
<h1>Vale Rideout</h1>
</div>
<div className="col-md-4 blue" />
<div className="col-md-4 blue">
<Navbar />
</div>
</div>
<div className="row" id="content">
<Content />
</div>
<div className="row justify-content-md-center" id="jumbotronFooter">
<p>&copy; 2018 vale rideout</p>
</div>
</div>
</div>
// </div>
);
}
}

export default App;


Content Component:



import React from "react";
import { Switch, Route, BrowserRouter } from "react-router-dom";
import About from "./about";
import Projects from "./projects";
import Contact from "./contact";

const Content = () => {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={About} />
<Route path="/projects" component={Projects} />
<Route path="/contact" component={Contact} />
</Switch>
</BrowserRouter>
);
};

export default Content;


This is the home page when visiting the hosted GH Pages URL



When refreshed within GH Pages, the full route renders



I'm sure this is a very small problem, but it will help me with deploying React apps - as I'm sure it's not a problem native to React.



Thanks!



Rideout










share|improve this question



























    2















    I have searched everywhere for the answer to this one - and I'm pretty sure it's the way I've laid out my Components in my React app:



    In making my Portfolio page in React, I used CREATE REACT APP and after it was finished and functioning perfectly locally, I made the necessary changes to the package.json file for homepage and build, etc. Then when I deployed using Yarn, the host link would open my site - but without one of my components: CONTENT. This component contains a switch that, according to the route, will show the proper content in the body of the page containing that route.



    When I click on the navbar, it will then take me to any of the three routes - including a properly displayed home page - but the home will only show after the page first loads and you click on the Navbar.



    Why is this? Again - it works locally just fine, but on GH Pages, will only show the Header, NavBar and Footer for the home page on first load.



    Thanks,



    Rideout



    See code below:



    Hosted URL on GH Pages:



    https://operasinger.github.io/VRideout-Portfolio-React/



    Partial Package.json:



    "homepage": "http://operasinger.github.io/VRideout-Portfolio-React/",
    "name": "vrideout-portfolio-react",
    "scripts": {
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d build"
    },


    App.js:



    import React, { Component } from "react";
    // import { Link } from "react-router-dom";
    // import './Fonts.css';
    import "./App.css";
    import "bootstrap/dist/css/bootstrap.min.css";
    import Navbar from "./components/navbar";
    import Content from "./components/content";

    class App extends Component {
    render() {
    return (
    <div className="App container-fluid" id="background">
    <div className="container">
    <div className="row jumbotronNavy">
    <div className="col-md-4 blue" id="headBlue">
    <h1>Vale Rideout</h1>
    </div>
    <div className="col-md-4 blue" />
    <div className="col-md-4 blue">
    <Navbar />
    </div>
    </div>
    <div className="row" id="content">
    <Content />
    </div>
    <div className="row justify-content-md-center" id="jumbotronFooter">
    <p>&copy; 2018 vale rideout</p>
    </div>
    </div>
    </div>
    // </div>
    );
    }
    }

    export default App;


    Content Component:



    import React from "react";
    import { Switch, Route, BrowserRouter } from "react-router-dom";
    import About from "./about";
    import Projects from "./projects";
    import Contact from "./contact";

    const Content = () => {
    return (
    <BrowserRouter>
    <Switch>
    <Route exact path="/" component={About} />
    <Route path="/projects" component={Projects} />
    <Route path="/contact" component={Contact} />
    </Switch>
    </BrowserRouter>
    );
    };

    export default Content;


    This is the home page when visiting the hosted GH Pages URL



    When refreshed within GH Pages, the full route renders



    I'm sure this is a very small problem, but it will help me with deploying React apps - as I'm sure it's not a problem native to React.



    Thanks!



    Rideout










    share|improve this question

























      2












      2








      2








      I have searched everywhere for the answer to this one - and I'm pretty sure it's the way I've laid out my Components in my React app:



      In making my Portfolio page in React, I used CREATE REACT APP and after it was finished and functioning perfectly locally, I made the necessary changes to the package.json file for homepage and build, etc. Then when I deployed using Yarn, the host link would open my site - but without one of my components: CONTENT. This component contains a switch that, according to the route, will show the proper content in the body of the page containing that route.



      When I click on the navbar, it will then take me to any of the three routes - including a properly displayed home page - but the home will only show after the page first loads and you click on the Navbar.



      Why is this? Again - it works locally just fine, but on GH Pages, will only show the Header, NavBar and Footer for the home page on first load.



      Thanks,



      Rideout



      See code below:



      Hosted URL on GH Pages:



      https://operasinger.github.io/VRideout-Portfolio-React/



      Partial Package.json:



      "homepage": "http://operasinger.github.io/VRideout-Portfolio-React/",
      "name": "vrideout-portfolio-react",
      "scripts": {
      "predeploy": "yarn run build",
      "deploy": "gh-pages -d build"
      },


      App.js:



      import React, { Component } from "react";
      // import { Link } from "react-router-dom";
      // import './Fonts.css';
      import "./App.css";
      import "bootstrap/dist/css/bootstrap.min.css";
      import Navbar from "./components/navbar";
      import Content from "./components/content";

      class App extends Component {
      render() {
      return (
      <div className="App container-fluid" id="background">
      <div className="container">
      <div className="row jumbotronNavy">
      <div className="col-md-4 blue" id="headBlue">
      <h1>Vale Rideout</h1>
      </div>
      <div className="col-md-4 blue" />
      <div className="col-md-4 blue">
      <Navbar />
      </div>
      </div>
      <div className="row" id="content">
      <Content />
      </div>
      <div className="row justify-content-md-center" id="jumbotronFooter">
      <p>&copy; 2018 vale rideout</p>
      </div>
      </div>
      </div>
      // </div>
      );
      }
      }

      export default App;


      Content Component:



      import React from "react";
      import { Switch, Route, BrowserRouter } from "react-router-dom";
      import About from "./about";
      import Projects from "./projects";
      import Contact from "./contact";

      const Content = () => {
      return (
      <BrowserRouter>
      <Switch>
      <Route exact path="/" component={About} />
      <Route path="/projects" component={Projects} />
      <Route path="/contact" component={Contact} />
      </Switch>
      </BrowserRouter>
      );
      };

      export default Content;


      This is the home page when visiting the hosted GH Pages URL



      When refreshed within GH Pages, the full route renders



      I'm sure this is a very small problem, but it will help me with deploying React apps - as I'm sure it's not a problem native to React.



      Thanks!



      Rideout










      share|improve this question














      I have searched everywhere for the answer to this one - and I'm pretty sure it's the way I've laid out my Components in my React app:



      In making my Portfolio page in React, I used CREATE REACT APP and after it was finished and functioning perfectly locally, I made the necessary changes to the package.json file for homepage and build, etc. Then when I deployed using Yarn, the host link would open my site - but without one of my components: CONTENT. This component contains a switch that, according to the route, will show the proper content in the body of the page containing that route.



      When I click on the navbar, it will then take me to any of the three routes - including a properly displayed home page - but the home will only show after the page first loads and you click on the Navbar.



      Why is this? Again - it works locally just fine, but on GH Pages, will only show the Header, NavBar and Footer for the home page on first load.



      Thanks,



      Rideout



      See code below:



      Hosted URL on GH Pages:



      https://operasinger.github.io/VRideout-Portfolio-React/



      Partial Package.json:



      "homepage": "http://operasinger.github.io/VRideout-Portfolio-React/",
      "name": "vrideout-portfolio-react",
      "scripts": {
      "predeploy": "yarn run build",
      "deploy": "gh-pages -d build"
      },


      App.js:



      import React, { Component } from "react";
      // import { Link } from "react-router-dom";
      // import './Fonts.css';
      import "./App.css";
      import "bootstrap/dist/css/bootstrap.min.css";
      import Navbar from "./components/navbar";
      import Content from "./components/content";

      class App extends Component {
      render() {
      return (
      <div className="App container-fluid" id="background">
      <div className="container">
      <div className="row jumbotronNavy">
      <div className="col-md-4 blue" id="headBlue">
      <h1>Vale Rideout</h1>
      </div>
      <div className="col-md-4 blue" />
      <div className="col-md-4 blue">
      <Navbar />
      </div>
      </div>
      <div className="row" id="content">
      <Content />
      </div>
      <div className="row justify-content-md-center" id="jumbotronFooter">
      <p>&copy; 2018 vale rideout</p>
      </div>
      </div>
      </div>
      // </div>
      );
      }
      }

      export default App;


      Content Component:



      import React from "react";
      import { Switch, Route, BrowserRouter } from "react-router-dom";
      import About from "./about";
      import Projects from "./projects";
      import Contact from "./contact";

      const Content = () => {
      return (
      <BrowserRouter>
      <Switch>
      <Route exact path="/" component={About} />
      <Route path="/projects" component={Projects} />
      <Route path="/contact" component={Contact} />
      </Switch>
      </BrowserRouter>
      );
      };

      export default Content;


      This is the home page when visiting the hosted GH Pages URL



      When refreshed within GH Pages, the full route renders



      I'm sure this is a very small problem, but it will help me with deploying React apps - as I'm sure it's not a problem native to React.



      Thanks!



      Rideout







      reactjs deployment single-page-application github-pages






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 14 '18 at 19:03









      V RideoutV Rideout

      113




      113
























          3 Answers
          3






          active

          oldest

          votes


















          0














          The BrowserRouter component matches the entire URL as seen in the browser to your Routes. Since the root of your React implementation is not the base (/) of the domain, you should add a baseUrl property to your BrowserRouter to reflect that fact. I think you can do:



          <BrowserRouter baseUrl="/VRideout-Portfolio-React"> but if not just look on the react-router docs.






          share|improve this answer































            0














            If you'd prefer not to hard-code the path into the Router, you should be able to set a homepage inside package.json. Putting this in the package: "homepage": "https://operasinger.github.io/VRideout-Portfolio-React/" will prefix the paths with /VRideout-Portfolio-React when you run npm run build






            share|improve this answer































              0














              Actually create-react-app docs covers this pretty well.



              I've also noticed, that you are using Router component (BrowserRouter in your example) incorrectly. It should be above all of Routing configuration and Links in jsx tree. This is done to inject context, which will be used by all children of the Router component (even deeply nested).





              TL;DR



              Just use <HashRouter> as the root component of your Application.






              share|improve this answer


























              • Thanks - still just a beginner, but I appreciate this one - worked like a charm.

                – V Rideout
                Nov 14 '18 at 21:56











              • Well.... update: charm? yes - I was able to get the homepage to render correctly, but it disabled all other Routes - using either ROUTE or LINK - even when used with every possible and conceivable permutation of: {${process.env.PUBLIC_URL}/} or basename={"my-subdirectory-name"} And this is with my homepage set in Package.json and the name listed as well. I've tried every permutation and sometimes it renders as before - with no CONTENT app in the body - and sometimes the full homepage renders. Now though, no links are active. The inconsistency bothers me as well.

                – V Rideout
                Nov 15 '18 at 17:40













              • @VRideout take a look at dsimushkin.github.io/react-draggable-hoc, you can find source files at github.com/dsimushkin/react-draggable-hoc/tree/master/demo. It's implemented with typescript, but I believe, you can figure that out

                – Sim Dim
                Nov 16 '18 at 8:13











              • @VRideout I've made an edit to the answer

                – Sim Dim
                Nov 16 '18 at 13:04











              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307104%2fsra-single-page-react-app-when-hosted-to-github-doesnt-load-component-whic%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              3 Answers
              3






              active

              oldest

              votes








              3 Answers
              3






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              0














              The BrowserRouter component matches the entire URL as seen in the browser to your Routes. Since the root of your React implementation is not the base (/) of the domain, you should add a baseUrl property to your BrowserRouter to reflect that fact. I think you can do:



              <BrowserRouter baseUrl="/VRideout-Portfolio-React"> but if not just look on the react-router docs.






              share|improve this answer




























                0














                The BrowserRouter component matches the entire URL as seen in the browser to your Routes. Since the root of your React implementation is not the base (/) of the domain, you should add a baseUrl property to your BrowserRouter to reflect that fact. I think you can do:



                <BrowserRouter baseUrl="/VRideout-Portfolio-React"> but if not just look on the react-router docs.






                share|improve this answer


























                  0












                  0








                  0







                  The BrowserRouter component matches the entire URL as seen in the browser to your Routes. Since the root of your React implementation is not the base (/) of the domain, you should add a baseUrl property to your BrowserRouter to reflect that fact. I think you can do:



                  <BrowserRouter baseUrl="/VRideout-Portfolio-React"> but if not just look on the react-router docs.






                  share|improve this answer













                  The BrowserRouter component matches the entire URL as seen in the browser to your Routes. Since the root of your React implementation is not the base (/) of the domain, you should add a baseUrl property to your BrowserRouter to reflect that fact. I think you can do:



                  <BrowserRouter baseUrl="/VRideout-Portfolio-React"> but if not just look on the react-router docs.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 14 '18 at 19:14









                  izbizb

                  40419




                  40419

























                      0














                      If you'd prefer not to hard-code the path into the Router, you should be able to set a homepage inside package.json. Putting this in the package: "homepage": "https://operasinger.github.io/VRideout-Portfolio-React/" will prefix the paths with /VRideout-Portfolio-React when you run npm run build






                      share|improve this answer




























                        0














                        If you'd prefer not to hard-code the path into the Router, you should be able to set a homepage inside package.json. Putting this in the package: "homepage": "https://operasinger.github.io/VRideout-Portfolio-React/" will prefix the paths with /VRideout-Portfolio-React when you run npm run build






                        share|improve this answer


























                          0












                          0








                          0







                          If you'd prefer not to hard-code the path into the Router, you should be able to set a homepage inside package.json. Putting this in the package: "homepage": "https://operasinger.github.io/VRideout-Portfolio-React/" will prefix the paths with /VRideout-Portfolio-React when you run npm run build






                          share|improve this answer













                          If you'd prefer not to hard-code the path into the Router, you should be able to set a homepage inside package.json. Putting this in the package: "homepage": "https://operasinger.github.io/VRideout-Portfolio-React/" will prefix the paths with /VRideout-Portfolio-React when you run npm run build







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Nov 14 '18 at 19:25









                          Smarticles101Smarticles101

                          697417




                          697417























                              0














                              Actually create-react-app docs covers this pretty well.



                              I've also noticed, that you are using Router component (BrowserRouter in your example) incorrectly. It should be above all of Routing configuration and Links in jsx tree. This is done to inject context, which will be used by all children of the Router component (even deeply nested).





                              TL;DR



                              Just use <HashRouter> as the root component of your Application.






                              share|improve this answer


























                              • Thanks - still just a beginner, but I appreciate this one - worked like a charm.

                                – V Rideout
                                Nov 14 '18 at 21:56











                              • Well.... update: charm? yes - I was able to get the homepage to render correctly, but it disabled all other Routes - using either ROUTE or LINK - even when used with every possible and conceivable permutation of: {${process.env.PUBLIC_URL}/} or basename={"my-subdirectory-name"} And this is with my homepage set in Package.json and the name listed as well. I've tried every permutation and sometimes it renders as before - with no CONTENT app in the body - and sometimes the full homepage renders. Now though, no links are active. The inconsistency bothers me as well.

                                – V Rideout
                                Nov 15 '18 at 17:40













                              • @VRideout take a look at dsimushkin.github.io/react-draggable-hoc, you can find source files at github.com/dsimushkin/react-draggable-hoc/tree/master/demo. It's implemented with typescript, but I believe, you can figure that out

                                – Sim Dim
                                Nov 16 '18 at 8:13











                              • @VRideout I've made an edit to the answer

                                – Sim Dim
                                Nov 16 '18 at 13:04
















                              0














                              Actually create-react-app docs covers this pretty well.



                              I've also noticed, that you are using Router component (BrowserRouter in your example) incorrectly. It should be above all of Routing configuration and Links in jsx tree. This is done to inject context, which will be used by all children of the Router component (even deeply nested).





                              TL;DR



                              Just use <HashRouter> as the root component of your Application.






                              share|improve this answer


























                              • Thanks - still just a beginner, but I appreciate this one - worked like a charm.

                                – V Rideout
                                Nov 14 '18 at 21:56











                              • Well.... update: charm? yes - I was able to get the homepage to render correctly, but it disabled all other Routes - using either ROUTE or LINK - even when used with every possible and conceivable permutation of: {${process.env.PUBLIC_URL}/} or basename={"my-subdirectory-name"} And this is with my homepage set in Package.json and the name listed as well. I've tried every permutation and sometimes it renders as before - with no CONTENT app in the body - and sometimes the full homepage renders. Now though, no links are active. The inconsistency bothers me as well.

                                – V Rideout
                                Nov 15 '18 at 17:40













                              • @VRideout take a look at dsimushkin.github.io/react-draggable-hoc, you can find source files at github.com/dsimushkin/react-draggable-hoc/tree/master/demo. It's implemented with typescript, but I believe, you can figure that out

                                – Sim Dim
                                Nov 16 '18 at 8:13











                              • @VRideout I've made an edit to the answer

                                – Sim Dim
                                Nov 16 '18 at 13:04














                              0












                              0








                              0







                              Actually create-react-app docs covers this pretty well.



                              I've also noticed, that you are using Router component (BrowserRouter in your example) incorrectly. It should be above all of Routing configuration and Links in jsx tree. This is done to inject context, which will be used by all children of the Router component (even deeply nested).





                              TL;DR



                              Just use <HashRouter> as the root component of your Application.






                              share|improve this answer















                              Actually create-react-app docs covers this pretty well.



                              I've also noticed, that you are using Router component (BrowserRouter in your example) incorrectly. It should be above all of Routing configuration and Links in jsx tree. This is done to inject context, which will be used by all children of the Router component (even deeply nested).





                              TL;DR



                              Just use <HashRouter> as the root component of your Application.







                              share|improve this answer














                              share|improve this answer



                              share|improve this answer








                              edited Nov 16 '18 at 14:13

























                              answered Nov 14 '18 at 21:44









                              Sim DimSim Dim

                              36527




                              36527













                              • Thanks - still just a beginner, but I appreciate this one - worked like a charm.

                                – V Rideout
                                Nov 14 '18 at 21:56











                              • Well.... update: charm? yes - I was able to get the homepage to render correctly, but it disabled all other Routes - using either ROUTE or LINK - even when used with every possible and conceivable permutation of: {${process.env.PUBLIC_URL}/} or basename={"my-subdirectory-name"} And this is with my homepage set in Package.json and the name listed as well. I've tried every permutation and sometimes it renders as before - with no CONTENT app in the body - and sometimes the full homepage renders. Now though, no links are active. The inconsistency bothers me as well.

                                – V Rideout
                                Nov 15 '18 at 17:40













                              • @VRideout take a look at dsimushkin.github.io/react-draggable-hoc, you can find source files at github.com/dsimushkin/react-draggable-hoc/tree/master/demo. It's implemented with typescript, but I believe, you can figure that out

                                – Sim Dim
                                Nov 16 '18 at 8:13











                              • @VRideout I've made an edit to the answer

                                – Sim Dim
                                Nov 16 '18 at 13:04



















                              • Thanks - still just a beginner, but I appreciate this one - worked like a charm.

                                – V Rideout
                                Nov 14 '18 at 21:56











                              • Well.... update: charm? yes - I was able to get the homepage to render correctly, but it disabled all other Routes - using either ROUTE or LINK - even when used with every possible and conceivable permutation of: {${process.env.PUBLIC_URL}/} or basename={"my-subdirectory-name"} And this is with my homepage set in Package.json and the name listed as well. I've tried every permutation and sometimes it renders as before - with no CONTENT app in the body - and sometimes the full homepage renders. Now though, no links are active. The inconsistency bothers me as well.

                                – V Rideout
                                Nov 15 '18 at 17:40













                              • @VRideout take a look at dsimushkin.github.io/react-draggable-hoc, you can find source files at github.com/dsimushkin/react-draggable-hoc/tree/master/demo. It's implemented with typescript, but I believe, you can figure that out

                                – Sim Dim
                                Nov 16 '18 at 8:13











                              • @VRideout I've made an edit to the answer

                                – Sim Dim
                                Nov 16 '18 at 13:04

















                              Thanks - still just a beginner, but I appreciate this one - worked like a charm.

                              – V Rideout
                              Nov 14 '18 at 21:56





                              Thanks - still just a beginner, but I appreciate this one - worked like a charm.

                              – V Rideout
                              Nov 14 '18 at 21:56













                              Well.... update: charm? yes - I was able to get the homepage to render correctly, but it disabled all other Routes - using either ROUTE or LINK - even when used with every possible and conceivable permutation of: {${process.env.PUBLIC_URL}/} or basename={"my-subdirectory-name"} And this is with my homepage set in Package.json and the name listed as well. I've tried every permutation and sometimes it renders as before - with no CONTENT app in the body - and sometimes the full homepage renders. Now though, no links are active. The inconsistency bothers me as well.

                              – V Rideout
                              Nov 15 '18 at 17:40







                              Well.... update: charm? yes - I was able to get the homepage to render correctly, but it disabled all other Routes - using either ROUTE or LINK - even when used with every possible and conceivable permutation of: {${process.env.PUBLIC_URL}/} or basename={"my-subdirectory-name"} And this is with my homepage set in Package.json and the name listed as well. I've tried every permutation and sometimes it renders as before - with no CONTENT app in the body - and sometimes the full homepage renders. Now though, no links are active. The inconsistency bothers me as well.

                              – V Rideout
                              Nov 15 '18 at 17:40















                              @VRideout take a look at dsimushkin.github.io/react-draggable-hoc, you can find source files at github.com/dsimushkin/react-draggable-hoc/tree/master/demo. It's implemented with typescript, but I believe, you can figure that out

                              – Sim Dim
                              Nov 16 '18 at 8:13





                              @VRideout take a look at dsimushkin.github.io/react-draggable-hoc, you can find source files at github.com/dsimushkin/react-draggable-hoc/tree/master/demo. It's implemented with typescript, but I believe, you can figure that out

                              – Sim Dim
                              Nov 16 '18 at 8:13













                              @VRideout I've made an edit to the answer

                              – Sim Dim
                              Nov 16 '18 at 13:04





                              @VRideout I've made an edit to the answer

                              – Sim Dim
                              Nov 16 '18 at 13:04


















                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307104%2fsra-single-page-react-app-when-hosted-to-github-doesnt-load-component-whic%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              這個網誌中的熱門文章

                              Xamarin.form Move up view when keyboard appear

                              Post-Redirect-Get with Spring WebFlux and Thymeleaf

                              Anylogic : not able to use stopDelay()