Authenticated Routing with React, React Router, Hooks, Redux & TypeScript

AppSimple.tsx

import * as React from "react";
import { Route, Router } from "react-router-dom";

import history from "./history";
import Nav from "./components/Nav";
import Pages from "./routes/Pages";

const App = () => (
  <div className="App">
    <Router history={history}>
      <Nav />
      <Route component={Pages} />
    </Router>
  </div>
);

export default App;

indexSimple.tsx

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { applyMiddleware, compose, createStore } from "redux";
import thunkMiddleware from "redux-thunk-recursion-detect";

import "./index.css";
import App from "./App";
import currentReducer from "./reducers/current";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

serviceWorker.unregister();

NavSimple.tsx

import * as React from "react";

import { NavLink } from "react-router-dom";

const About = () => (
  <>
    <ul>
      <li>
        <NavLink to="/">
          Landing
        </NavLink>
      </li>
      <li>
        <NavLink to="/terms">
          Terms
        </NavLink>
      </li>
      <li>
        <NavLink to="/broken-link">
          Broken link
        </NavLink>
      </li>
      <li>
        <NavLink to="/log-in">
          Log in
        </NavLink>
      </li>
    </ul>
  </>
);

export default About;