React - Link przekierowuje do pustej strony

Witam,

mam, przynajmniej dla mnie, dziwny problem, z którym męczę się już od kilku dni. Jego dziwność polega na tym, że przechodzę dzięki Link do poszczególnych stron, aż do tego momentu.. gdyż wyświetla mi się pusta strona. Po kolei - poniżej kod:

1. index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from "./App";
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

2. Routes.js:

import React, {Component} from 'react';
import {Route, Switch} from 'react-router-dom';
import Home from "./components/Home";
import Page1 from "./components/Page1";
import Page2 from "./components/Page2";
import Page3 from "./components/Page3";

export default class Routes extends Component{

    render() {
        return(
            <div>
                <Route exact path={"/"} component={Home}/>
                <Route exact path={"/page1"} component={Page1}/>
                <Route exact path={"/page2"} component={Page2}/>
                <Route exact path={"/page3"} Component={Page3}/>
            </div>
        )
    }
}

3. App.js:

import React, {Component} from 'react';
import {Switch, Route, Link, BrowserRouter as Router} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Routes from "./Routes";

export default class App extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Routes/>
                </Switch>
            </Router>
        );
    }
}

4. Ferelne przekierowanie..:

import React, {Component} from "react";
import HomeDataService from "../service/HomeService";
import styles from './Page2.module.css';
import Header from "./Header";
import Footer from "./Footer";
import {Link} from "react-router-dom";

export default class Page2 extends Component {

    constructor(props) {
        super(props);
        this.getLoans = this.getLoans.bind(this);
        
        this.state = {
            loans: []
        }
    }

    componentDidMount() {
        this.getLoans();
    }

    getLoans() {
        HomeDataService.getAllLoansWithPayments()
            .then(response => {
                this.setState({
                        loans: response.data
                });
                console.log("Loans: ", response.data);
            })
            .catch(e => {
                console.log(e);
            });
    }
   
    render() {
        const {loans} = this.state;

        return (
            <div>
                <Header/>
                <div className="container">
                    <div className={styles.DivListOffers}>
                        <table className={[styles.Table, styles.TableHover, 'sticky-header'].join(' ')}>
                            <thead className={styles.TheadLight}>
                            <tr>
                                <th className={styles.ThSticky}>Wybierz (max. 3)</th>
                            </tr>
                            </thead>

                            <tbody>
                            {loans &&
                            loans.map((loan) => (

                            <tr key={loan.id}>
                                    <td className={styles.TdVerticalMiddle}>
                                        <Link
                                            to={{
                                                pathname: `/page3`
                                            }}
                                            className="btn btn-sm btn-outline-success rounded"
                                        >
                                            Wybierz
                                        </Link>
                                    </td>
                                </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
                <Footer/>
            </div>
        );
    }
}

5. I Page3:

import React, {Component} from "react";
import HomeDataService from "../service/HomeService";
import Header from "./Header";
import Footer from "./Footer";

export default class Page3 extends Component {

    constructor(props) {
        super(props);
        this.showSomething = this.showSomething.bind(this);
    }

    render() {
        const {msg} = this.state;

        return (
            <div>
                <Header/>

                <Footer/>
            </div>
        );
    }
}

Próbowałem wielu opcji zarówno po stronie routingu (w plikach App i Routes), jak i samego przekierowania w pliku Page2 (stosowałem Link, button z onClick{() => this.props.history.push(/page3)}, a także window.location.href), ale efekt ciągle jest taki sam, czyli pusta strona.

Dodatkowo, stosując każdy z opisanych w powyższym przykładzie sposobów i wpisując adres do strony głównej, czyli "/" lub do poprzedniej, czyli "/page1", wszystko pięknie działa..

Mam nadzieję, że ktoś będzie miał sensowny pomysł..

<Route exact path={"/page3"} Component={Page3}/>

Tu jest błąd. Wielkość liter ma znaczenie.

Markuz, jesteś Wielki :) Dziękuję! Tyle czasu zmarnowane przez taką drobnostkę...