How to client-side-routing with create-react-app

tl;dr: What changes do I need to make to the npx create-react-app environment to enable client-side routing with react-router?

EDIT: Answered my own question, do not use href to link to within your app, use react-router-dom ‘Link’.

In more detail..

I have followed Andrew Mead’s React tutorial and all went well.

His setup utilised webpack with the following inserted to the webpack.config.js file..

devServer:{
            contentBase:path.resolve(__dirname, 'public'),
            historyApiFallback: true
        }

..where historyApiFallback: true meant his dev-server utilised client-side routing vs server-side.

Now that I finished the bulk of the tutorial I decided to create my own app using npx create-react-app.

Everything is working fine, but the routing is not client-side and there is no webpack.config.js file.

I understand CSR works by serving index.html only and manipulating the DOM in the background.

The documentation states one way to make this work is to import 'express' which isn’t part of the create-react-app initial environment, and include some code using the variable app. However, I don’t actually know where this file lives / should live / where to important/edit etc, or whether express is actually required and perhaps there’s a way to "natively" do this without adding another module to my react package.

Here are the relevant script snippets for clarity in case I have done something wrong.

Thanks in advance.

Paul.

index.js

// react imports
import React from 'react';
import ReactDOM from 'react-dom';
// materialize imports
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import './styles/customcss.css';
// redux imports
import store from './app/store';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';
// component imports
import AppRouter from './app/router';

// app render
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <AppRouter />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

./app/router/

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import AppMainPage from "../pages/portalPage";
import ConnectedAccountPage from "../pages/accountPage";
import ConnectedPostPage from "../pages/postPage";
import { SiteWideNavBar } from "../components/sitewide/navbar";
import { SiteWideFooter } from "../components/sitewide/footer";

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <SiteWideNavBar />
      <Switch>
        <Route path="/" exact={true} component={AppMainPage} />
        <Route path="/account" exact={true} component={ConnectedAccountPage} />
        <Route path="/post" exact={true} component={ConnectedPostPage} />
      </Switch>
      <SiteWideFooter />
    </div>
  </BrowserRouter>
);

export default AppRouter;

EDIT: package.json if relevant

{
  "name": "myproject",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.5.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "materialize-css": "^1.0.0-rc.2",
    "moment": "^2.29.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-forms-materialize-css": "^1.0.1",
    "react-google-maps": "^9.4.5",
    "react-icons": "^4.1.0",
    "react-materialize": "^3.9.6",
    "react-redux": "^7.2.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "uuid": "^8.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}