How to make navlink work?

Question

Node.js

NavLink not working, project based on this repository https://github.com/conplementAG/ReactSSRTypescript...
App.tsx

import React from 'react';
import { Route, Switch } from 'react-router-dom';

import './app.scss';
import Register from '../register/register';
import Login from '../login/login';
import Home from '../home/home';
import Footer from '../footer/footer';
import Profile from '../profile/profile';
import Wallets from '../wallets/wallets';

export default class App extends React.PureComponent {
    public render() {
        return (<div className="d-flex flex-column h-100">
            <Switch>
                <Route exact={true} path="/" component={Home}/>
                <Route exact={true} path="/register" component={Register}/>
                <Route exact={true} path="/login" component={Login}/>
                <Route exact={true} path="/profile" component={Profile}/>
                <Route exact={true} path="/wallets" component={Wallets}/>
            </Switch>
            <Footer/>
        </div>);
    }
}

import PropTypes from 'prop-types';
import { NavLink, withRouter, RouteProps } from 'react-router-dom';
import './top-nav.scss';
import * as React from 'react';

export default class TopNav extends React.Component {
    public render() {
        return (<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                <a className="navbar-brand" href="#">Navbar</a>
                <button
                    className="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span className="navbar-toggler-icon">&nbsp;</span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item active">
                            <NavLink to="" className="nav-link">
                                Home
                                <span className="sr-only">(current)</span>
                            </NavLink>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#">Link</a>
                        </li>
                        <li className="nav-item dropdown">
                            <a
                                className="nav-link dropdown-toggle"
                                href="#"
                                id="navbarDropdown"
                                role="button"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                            >
                                Dropdown
                            </a>
                            <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a className="dropdown-item" href="#">Action</a>
                                <a className="dropdown-item" href="#">Another action</a>
                                <div className="dropdown-divider" />
                                <a className="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link disabled" href="#" tabIndex={-1} aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                    <span className="navbar-text mr-2">[phone]</span>
                    <NavLink to="\login" className="btn btn-success mr-2">Вход</NavLink>
                    <NavLink to="\register" className="btn btn-success mr-2">Регистрация</NavLink>
                </div>
            </nav>);
    }
}

Answer 1

I see two options (or both together)
1) Remove PureComponent from App, I don’t understand why it is needed there
2) Upgrade to React Router v5, it uses a different subscription model that will break PureComponent.