When using React, we’re writing a SPA and when using the React Router we actually need all pages/URL’s to go through App.tsx and the React Router. If everything is not set up correctly you’ll find when you navigate to a page off of the route and refresh the page, or just try to navigate via a direct URL you may end up with a 404 in production, even though everything worked in dev.

Note: Obviously we do not have an App.tsx when transpiled, but I’ll refer to that page as it makes things more obvious what’s going on.

To be more specific to my situation where I discovered these issues – I’ve created a subdomain (on a folder off of the root) for a React site I’m developing that will hosted from that subdomain.

As stated, all works great using serve or the start script. When deployed to production the root page works fine and links from that page via React Router also work fine but refreshing one of those links or trying to navigate directly to a link off of the root results in a 404. So what’s going on?

This issue is that the web server being used is not routing those relative URL’s via the App.tsx router page now and so the React Router is not actually doing anything, it only works when we route things via the App.tsx code.

To solve this, within your React public folder or the root of where you eventually deploy the React web site to, add a .htaccess file (if one is not already there and if your webserver supports this file). Add the following to that file

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

And that’s it, now the web server will route via our App.tsx (index.html).

See the following references which supplied all this information and thanks to these posts I was able to get my React direct links working

404: React Page Not Found
Simple Steps on how to Deploy or Host your ReactJS App in cPanel
Routing single page application on Apache with .htaccess

I’ve been looking into theming a React project and whilst I ultimately intended to use the theming capabilities within material-ui I was interested in how I might write our own.

We’re going to be using React context.

Let’s start by creating a theme.ts file which will include our “base” theme style

export const theme = {
  button: {
    backgroundColor: "white",
    borderColor: "red",
    color: "blue",
    borderWidth: "2px",
    borderStyle: "solid",
    padding: "10px",
    fontSize: "24px",
  }
};

In the above code we created a button property which obviously defines our (rather horrible) default button style. Now we need some way to apply this theme (and any new version of our theme) to our application.

Hence we create a ThemeProvider (ThemeProvider.tsx in my case), which looks like this

import React from "react";
import { theme } from "../theme";

export const ThemeContext = React.createContext(theme);

export function ThemeProvider(props: any) {
  return (
    <ThemeContext.Provider value={props.theme}>
      {props.children}
    </ThemeContext.Provider>
  );
}

In this case, we create a React context, and assign a default value to it (in the shape of our base theme). The ThemeProvider function is then used to wrap our application supplying the theme to all components that wish to use it. So here’s an example of the ThemeProvider in use (in the App.tsx)

import React from 'react';
import { ThemeProvider } from './components/ThemeProvider';
import { Button } from './components/Button';
import { myTheme } from './myTheme';

const App: React.FC = () => {
  return (
    <ThemeProvider theme={myTheme}>
      <div className="App">
        <Button>Themed Button</Button>
      </div>
    </ThemeProvider>
  );
}

export default App;

You’ll notice we’ve also taken this opportunity to supply our overridden theme (with a slightly nicer button style) which is shown below (myTheme.ts)

export const myTheme = {
  button: {
    backgroundColor: "green",
    color: "white",
    borderWidth: "2px",
    borderStyle: "solid",
    padding: "10px",
    fontSize: "24px",
  }
};

As you can see from our App.tsx code, we’re using a Button component, so let’s look at that code now (Button.tsx)

import React from "react";
import { ThemeContext } from "./ThemeProvider";

export const Button = (props: any) => (
  <ThemeContext.Consumer>
    {theme => (
      <button style={theme.button} {...props}>
        {props.children}
      </button>
    )}
  </ThemeContext.Consumer>
);

In this code we consume the React context we created via the ThemeProvider file and apply the style to the button, also passing through any props to the button.

Now if you were to run this application the button will be displayed with our new theme (a nice green background button). If you change the App.tsx theme property to the default “base” theme, then we our default style.