Styjun

What mechanic is there to disable a threat instead of killing it?

Forgetting the musical notes while performing in concert

What do you call someone who asks many questions?

How does a predictive coding aid in lossless compression?

Is there an expression that means doing something right before you will need it rather than doing it in case you might need it?

Why is consensus so controversial in Britain?

Is it logically or scientifically possible to artificially send energy to the body?

Why didn't Miles's spider sense work before?

Can I run a new neutral wire to repair a broken circuit?

Can compressed videos be decoded back to their uncompresed original format?

Expand and Contract

How could indestructible materials be used in power generation?

How to prevent "they're falling in love" trope

Why no variance term in Bayesian logistic regression?

Is it inappropriate for a student to attend their mentor's dissertation defense?

Size of subfigure fitting its content (tikzpicture)

Is there a hemisphere-neutral way of specifying a season?

iPad being using in wall mount battery swollen

CAST throwing error when run in stored procedure but not when run as raw query

Do scales need to be in alphabetical order?

What does the expression "A Mann!" means

Little known, relatively unlikely, but scientifically plausible, apocalyptic (or near apocalyptic) events

Determining Impedance With An Antenna Analyzer

How can I deal with my CEO asking me to hire someone with a higher salary than me, a co-founder?

Redirecting Server Requests to /index.html for React/Angular SPA

How to allow for webpack-dev-server to allow entry points from react-routerClient Routing (using react-router) and Server-Side RoutingHow do I redirect into react-router from express?React Router <redirect> not workingReact-Router External linkreact router : client side routing vs server side routingReact redirect to index.html, www & httpsReact redirect with extension not workingLoad React SPA according to requested routeGet “out” of react-router (make a new server request on a redirect)

0

Let's say I have a React or Angular app hosted at www.mywebsite.com/index.html with Apache serving the web app file. Inside the app, I have many routes
defined such as /aboutus or /faq. But as we all know, there don't actually exist /aboutus.html or /faq.html files. These routes are built into the router in the web app.

So I'm wondering what happens if someone tries to access www.mywebsite.com/aboutus directly without first loading the web app at www.mywebsite.com/index.html. I've read online that what you have to do for this situation since you only have one actual file is redirect all http requests to /index.html. If you are using Apache, you have to configure it to redirect everything.

What I'm wondering is how do React/Angular routers know which route to load after the redirect. For example, if you go to www.mywebsite.com/aboutus, it redirects to www.mywebsite.com/index.html, and according to what I've read online, the React/Angular application will then be able to load the /aboutus route within the app after the redirect.

I would've imagined that the /aboutus gets lost in the redirect. If your server redirects to www.website.com/index.html, then you are at a different URL now and have lost the /aboutus. The web app gets loaded, but without the original target URL, it can't know where to go. How can this work?

angular reactjs react-router angular-routing deep-linking

share|improve this question

asked Mar 21 at 21:16

user3567004user3567004

407

add a comment | 

0

Let's say I have a React or Angular app hosted at www.mywebsite.com/index.html with Apache serving the web app file. Inside the app, I have many routes
defined such as /aboutus or /faq. But as we all know, there don't actually exist /aboutus.html or /faq.html files. These routes are built into the router in the web app.

So I'm wondering what happens if someone tries to access www.mywebsite.com/aboutus directly without first loading the web app at www.mywebsite.com/index.html. I've read online that what you have to do for this situation since you only have one actual file is redirect all http requests to /index.html. If you are using Apache, you have to configure it to redirect everything.

What I'm wondering is how do React/Angular routers know which route to load after the redirect. For example, if you go to www.mywebsite.com/aboutus, it redirects to www.mywebsite.com/index.html, and according to what I've read online, the React/Angular application will then be able to load the /aboutus route within the app after the redirect.

I would've imagined that the /aboutus gets lost in the redirect. If your server redirects to www.website.com/index.html, then you are at a different URL now and have lost the /aboutus. The web app gets loaded, but without the original target URL, it can't know where to go. How can this work?

angular reactjs react-router angular-routing deep-linking

share|improve this question

asked Mar 21 at 21:16

user3567004user3567004

407

add a comment | 

Let's say I have a React or Angular app hosted at www.mywebsite.com/index.html with Apache serving the web app file. Inside the app, I have many routes
defined such as /aboutus or /faq. But as we all know, there don't actually exist /aboutus.html or /faq.html files. These routes are built into the router in the web app.

So I'm wondering what happens if someone tries to access www.mywebsite.com/aboutus directly without first loading the web app at www.mywebsite.com/index.html. I've read online that what you have to do for this situation since you only have one actual file is redirect all http requests to /index.html. If you are using Apache, you have to configure it to redirect everything.

What I'm wondering is how do React/Angular routers know which route to load after the redirect. For example, if you go to www.mywebsite.com/aboutus, it redirects to www.mywebsite.com/index.html, and according to what I've read online, the React/Angular application will then be able to load the /aboutus route within the app after the redirect.

I would've imagined that the /aboutus gets lost in the redirect. If your server redirects to www.website.com/index.html, then you are at a different URL now and have lost the /aboutus. The web app gets loaded, but without the original target URL, it can't know where to go. How can this work?

angular reactjs react-router angular-routing deep-linking

share|improve this question

asked Mar 21 at 21:16

user3567004user3567004

407

angular reactjs react-router angular-routing deep-linking

angular reactjs react-router angular-routing deep-linking

share|improve this question

asked Mar 21 at 21:16

user3567004user3567004

407

share|improve this question

asked Mar 21 at 21:16

user3567004user3567004

407

asked Mar 21 at 21:16

user3567004user3567004

407

asked Mar 21 at 21:16

user3567004user3567004

407

2 Answers
2

active

oldest

votes

1

server shouldn't redirect /aboutus to /index.html with 30X code response. instead it should response 200 index.html. in this case browser will load www...../aboutus link (it will get the same index.html as at .com/index.html path but just with another url) and FE famework scripts will handle the rest

share|improve this answer

answered Mar 21 at 21:29

AndreiAndrei

5867

add a comment | 

0

and according to what I've read online, the React/Angular application will
then be able to load the /aboutus route within the app after the
redirect.

^^ This is true - what you have read is not lies at all. When the router code bootstraps, it checks the current url and sees if any matches, if it finds a match, it renders that route - otherwise it will use the fallback route (probably home or similar).

share|improve this answer

answered Mar 21 at 21:23

jsdeveloperjsdeveloper

1,822157

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



);

draft saved

draft discarded

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55289375%2fredirecting-server-requests-to-index-html-for-react-angular-spa%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

server shouldn't redirect /aboutus to /index.html with 30X code response. instead it should response 200 index.html. in this case browser will load www...../aboutus link (it will get the same index.html as at .com/index.html path but just with another url) and FE famework scripts will handle the rest

share|improve this answer

answered Mar 21 at 21:29

AndreiAndrei

5867

add a comment | 

1

server shouldn't redirect /aboutus to /index.html with 30X code response. instead it should response 200 index.html. in this case browser will load www...../aboutus link (it will get the same index.html as at .com/index.html path but just with another url) and FE famework scripts will handle the rest

share|improve this answer

answered Mar 21 at 21:29

AndreiAndrei

5867

add a comment | 

server shouldn't redirect /aboutus to /index.html with 30X code response. instead it should response 200 index.html. in this case browser will load www...../aboutus link (it will get the same index.html as at .com/index.html path but just with another url) and FE famework scripts will handle the rest

share|improve this answer

answered Mar 21 at 21:29

AndreiAndrei

5867

share|improve this answer

answered Mar 21 at 21:29

AndreiAndrei

5867

answered Mar 21 at 21:29

AndreiAndrei

5867

answered Mar 21 at 21:29

AndreiAndrei

5867

0

and according to what I've read online, the React/Angular application will
then be able to load the /aboutus route within the app after the
redirect.

^^ This is true - what you have read is not lies at all. When the router code bootstraps, it checks the current url and sees if any matches, if it finds a match, it renders that route - otherwise it will use the fallback route (probably home or similar).

share|improve this answer

answered Mar 21 at 21:23

jsdeveloperjsdeveloper

1,822157

add a comment | 

0

and according to what I've read online, the React/Angular application will
then be able to load the /aboutus route within the app after the
redirect.

^^ This is true - what you have read is not lies at all. When the router code bootstraps, it checks the current url and sees if any matches, if it finds a match, it renders that route - otherwise it will use the fallback route (probably home or similar).

share|improve this answer

answered Mar 21 at 21:23

jsdeveloperjsdeveloper

1,822157

add a comment | 

and according to what I've read online, the React/Angular application will
then be able to load the /aboutus route within the app after the
redirect.

^^ This is true - what you have read is not lies at all. When the router code bootstraps, it checks the current url and sees if any matches, if it finds a match, it renders that route - otherwise it will use the fallback route (probably home or similar).

share|improve this answer

answered Mar 21 at 21:23

jsdeveloperjsdeveloper

1,822157

share|improve this answer

answered Mar 21 at 21:23

jsdeveloperjsdeveloper

1,822157

answered Mar 21 at 21:23

jsdeveloperjsdeveloper

1,822157

answered Mar 21 at 21:23

jsdeveloperjsdeveloper

1,822157