Serve another(standalone) page or static file in website built with react

Question

I have a website built with react, which uses react-router. For some route I want to serve another page or static file, but since all request are forwarded to react router, its doesn't work.

for example

www.myapp.com/sitemap.xml
www.myapp.com/something.html

^ these link works first time, but once i load website then it doesn't work, as all request goe through react router.

Any solution to make it work all the time. Thanks.

Edit

I'm using apache server which is configured to redirect all request to index.html, i guess this is the reason for this behaviour. This is my configuration, but i don't know how to fix this.

Options -MultiViews
RewriteEngine On

RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Update I tried solution suggested in answer.

my routes looks like this, for something.html i am loading ServerLoad component

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/about" component={About} />
    <Route path="something.html" component={ServerLoad} />
    <Route component={NoMatch} />
</Switch>

In ServerLoad component's componentDidMount function I did this. But it doesn't work.

componentDidMount() {
    window.location.reload(true);
}

More I have setup this project using create-react-app, and serving it by express server(like this). I'am not sure if i need to do some setting there to server other static files.

Did you try with a normal <a href="/something.html"></a> tag instead of react-router Link component? — Tharaka Wijebandara
– Tharaka Wijebandara, Commented Aug 20, 2017 at 14:09
Yes i did, even if i paste url manually (once i had loaded website) then it goes to react router and doesn't load anything. — Abhishek
– Abhishek, Commented Aug 21, 2017 at 11:57
What version of react-router are you using? I am using 3.0.5 and when I am giving it <a href> way it is working fine for me. Could you share your code snipet? — Shubham Jain
– Shubham Jain, Commented Aug 23, 2017 at 11:47
I am using react router 4. i tried setting window.href.location but thats not working — Abhishek
– Abhishek, Commented Aug 24, 2017 at 13:11
Create a exception in your htaccess for that specific file :) — bluehipy
– bluehipy, Commented Aug 24, 2017 at 13:25

webdeb · Accepted Answer · 2017-09-02 13:23:23Z

15

+50

This should work:

const reload = () => window.location.reload();

<Router>
  // all your routes..
  ...

  // Your special routes..
  <Route path="/sitemap.xml" onEnter={reload} />
  <Route path="/something.html" onEnter={reload} />
</Router>

So, I think this should be pretty clear what it does ;)

Update:

if this is an option you can simply put target="_blank" attribute in your <Link>

IMHO this is from the UX perspective even better, because if these routes are not part of your main application, the user can just switch the Tab after visiting that special pages.

edited Sep 2, 2017 at 13:23

answered Aug 29, 2017 at 10:25

webdeb

13.3k5 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abhishek Over a year ago

Hi, I tried this, check update in question. It doesn't work

Abhishek Over a year ago

Ok So this solution works, but it might not work properly if you have service worker registered. Because Create-React-App support this feature out of box so it was enabled in my site. I have disabled service worker and now it works.

Abhishek Over a year ago

Thank you @webdeb

webdeb Over a year ago

glad to help.. could you dive deeper into the problem with the service worker? Would be interesting to know whats the difference when a service worker is running..

Abhishek Over a year ago

yes i plan to do so, but right now my schedule is tight. I will update.

|

Nico · Accepted Answer · 2020-12-15 16:25:36Z

7

How about simply put your statics files like sitemap.xml inside React's public folder along side index.html.

I thinks this is the easiest way.

answered Dec 15, 2020 at 16:25

Nico

90810 silver badges21 bronze badges

Comments

Angelo Giuseppe · Accepted Answer · 2021-04-21 16:10:47Z

4

It's an unwanted behaviour of ServiceWorker.js use the comment below and change it in index.js of your React project (if you don't need a service worker) and it should work

import { unregister } from './registerServiceWorker';
unregister();

https://github.com/facebookincubator/create-react-app/issues/2715

If you still need a service worker and you want to avoid it having this behavior, consider installing a custom service worker, there you can establish a whitelist of paths to be ignored. For more information you can check the next link.

https://medium.com/swlh/how-to-implement-custom-service-worker-in-create-react-app-without-eject-bfa2c5f4ae96

edited Apr 21, 2021 at 16:10

answered Oct 26, 2017 at 20:46

Angelo Giuseppe

951 gold badge1 silver badge9 bronze badges

2 Comments

Angelo Giuseppe Over a year ago

I had the same problem, that's why I suggest this solution

panteo Over a year ago

Instead of unregister your service woerker you can configure it to exempt requests from being fulfilled by index.html.

corysimmons · Accepted Answer · 2018-03-04 07:00:00Z

1

Use Switch combined with a NoMatch component, combined with webdeb's solution:

<Router>
  <div>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/admin" component={Admin} />
      <Route component={NoMatch} />
      <Route onEnter={() => window.location.reload()} />
    </Switch>
  </div>
</Router>

This will match routes, show 404 if no valid href exists, and show a file or something if it's a valid href.

answered Mar 4, 2018 at 7:00

corysimmons

7,8055 gold badges63 silver badges66 bronze badges

Comments

dsunku · Accepted Answer · 2019-08-21 04:25:26Z

1

If you need /terms to redirect to /terms.html, the code below worked for me with react-router 3.x.

const reload = () => window.location.reload();
<Router>
  <Switch>
    <Route exact path="/" component={Home} />                
    <Route path="/terms.html" render={reload} />
    <Route path="/privacy.html" render={reload} />
    <Route path="/terms" render={() => <Redirect
        to={{
          pathname: "/terms.html"
        }}
      />} 
    />
    <Route path="/privacy" render={() => <Redirect
        to={{
          pathname: "/privacy.html"
        }}
      />} 
    />
  </Switch>
</Router>

answered Aug 21, 2019 at 4:25

dsunku

5135 silver badges9 bronze badges

Comments

Lojith Vinsuka · Accepted Answer · 2022-04-06 16:40:01Z

0

1. Create folders for each HTML file inside the public folder.

2. Add route paths (path= name_of_folder_contained_static_file)

3. Call route paths as you want :)

Demo:

answered Apr 6, 2022 at 16:40

Lojith Vinsuka

1,0471 gold badge14 silver badges8 bronze badges

1 Comment

Sourav Anand Over a year ago

In case you are interested in replacing localhost with your domain. You can directly use window.location.href = process.env.PUBLIC_URL + '/aboutstat' in your component itself.

Eric Tan · Accepted Answer · 2019-06-13 22:54:25Z

-2

If the pages are unrelated to the Reactjs App at all(i.e. using another directory), I think we can route it from Node layer using the following code, so that the structure is more intuitive:

app.use('/url_to_static_pages', express.static('path_to_static_files'));

answered Jun 13, 2019 at 22:54

Eric Tan

1,46317 silver badges14 bronze badges

1 Comment

Turnip Over a year ago

OP didn't mention anything about using node

Collectives™ on Stack Overflow

Serve another(standalone) page or static file in website built with react

7 Answers 7

6 Comments

Comments

2 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

Comments

2 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related