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

Answer 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.

Answer 2

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.

Answer 3

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

Answer 4

It's an unwanted behaviour of ServiceWorker.js use the comment below and change it in index.js of your React proyect and it should work

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

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

Answer 5

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>

Answer 6

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.