SRA - Single Page React App - when hosted to GitHub, doesn't load Component which stores 'switch' router code
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>© 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
add a comment |
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>© 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
add a comment |
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>© 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
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>© 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
reactjs deployment single-page-application github-pages
asked Nov 14 '18 at 19:03
V RideoutV Rideout
113
113
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
The BrowserRouter
component matches the entire URL as seen in the browser to your Route
s. 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.
add a comment |
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
add a comment |
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 Link
s 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.
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
The BrowserRouter
component matches the entire URL as seen in the browser to your Route
s. 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.
add a comment |
The BrowserRouter
component matches the entire URL as seen in the browser to your Route
s. 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.
add a comment |
The BrowserRouter
component matches the entire URL as seen in the browser to your Route
s. 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.
The BrowserRouter
component matches the entire URL as seen in the browser to your Route
s. 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.
answered Nov 14 '18 at 19:14
izbizb
40419
40419
add a comment |
add a comment |
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
add a comment |
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
add a comment |
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
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
answered Nov 14 '18 at 19:25
Smarticles101Smarticles101
697417
697417
add a comment |
add a comment |
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 Link
s 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.
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
add a comment |
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 Link
s 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.
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
add a comment |
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 Link
s 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.
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 Link
s 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.
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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