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.

Answer 1

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.