ReactJS - Route über mehrere Seiten?

[terra75]

Auch mit der Gefahr, das ich hier nicht ganz richtig bin stelle ich doch mal eine Frage, die mir sicher jemand beantworten kann.

Es geht um ReactJS in Kombination mit NodeJS.
Bin da auch ein absoluter Neuling drin aber habe da Ideen, die am besten damit gelöst werden.

Ich versuche eine einfache Webseite zu erstellen, welche nur eine dynamische Unterseite beinhalten soll, wo Content angezeigt werden soll. Diese Webseite ist aber 1 von 3 Teilen, die zu Anfang aufgerufen werden können.

Standartmäßig einfacher URL Aufruf soll die Webseite aufrufen.
Des weiterem gibt es noch eine Seite mit einem Login Bildschirm und als drittes wäre nach dem Login noch ein separates Dashboard.

Dieses funktioniert soweit auch schon ganz gut.

Meine App.js die zu Anfang aufgerufen wird:

  return (
        <div className="App">
            <BrowserRouter>

                <Switch>
                    <Route path="/" exact component={Main}/>
                    <PublicRoute path="/login" exact component={Login}/>
                    <PrivateRoute path="/dashboard" exact component={Dashboard}/>
                    <Route path="*" component={E404} />
                </Switch>

            </BrowserRouter>
        </div>
    ); 

Dort sieht man, das wenn nur die URL roh eingegeben wird "Main" aufgerufen wird.

Meine Main.jsx sieht dann wie folgt aus:

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

import "./Main.css";

import Navbar from './Navbar/Navbar';
import Home from './_Sites/Home';
import Content from './_Sites/Content';

function Main() {


    return (
        
        <div className="homepage">

            <Navbar />

            <BrowserRouter>

                <Switch>
                    <Route path='/' exact component={Home}/>
                    <Route path='/Content/:id' exact component={Content}/>                
                </Switch>

            </BrowserRouter>

        </div>
       
    );
}

export default Main; 

Hier war die Überlegung, das ich automatisch als erstes den Standart-Content aufrufe, der mir die eigentliche Webseite anzeigt.
Rufe ich jetzt ein Link auf (z.b: <Link className="cards__item__link" to={props.path}>mehr...</Link>) springt auch das Fenster so um wie ich es möchte.

Mein Problem ist einfach ein Logikfehler, den ich sogar irgendwo sehe aber nicht weis, wie ich es Lösen soll.

Gebe ich jetzt den Link im Browser direkt ein (z.b. localhost:3000/Content/Zeige-mir-Content) dann lande ich auf die 404 Seite.

Es wir mit Sicherheit mit <Route path='/'> in beiden Dateien zusammenhängen aber wie macht man das richtig?

Gruß, Terra