1. Einführung in React Router

React Router ist eine Bibliothek zur Handhabung des Routings in React-Anwendungen. Es ermöglicht Ihrer App, zwischen verschiedenen Komponenten und Ansichten zu navigieren, ohne die gesamte Seite neu laden zu müssen, was für ein nahtloses Benutzererlebnis sorgt.

2. Grundlegende Einrichtung

Beginnen Sie mit der Installation von „react-router-dom“:

npm install react-router-dom

Grundlegendes Routing mit BrowserRouter, Routen und Route einrichten:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = () => 
Home
;
const About = () => 
About
;

const App = () => {
  return (
    } />
        } />
      
  );
};

export default App;

3. Verschachteltes Routing

Für komplexere Apps können Sie Routen verschachteln. So richten Sie verschachtelte Routen in einer übergeordneten Komponente ein:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Dashboard = () => 
Dashboard Home
;
const Profile = () => 
Your Profile
;

const DashboardLayout = () => {
  return (
    

      } />
        } />
      
  );
};

const App = () => {
  return (
    } />
      
  );
};

export default App;

4. Dynamisches Routing

Dynamisches Routing ermöglicht die Übergabe von Parametern in der URL. So definieren Sie eine dynamische Route und greifen darauf zu:

import { useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  return 
User ID: {id}
;
};

const App = () => {
  return (
    } />
      
  );
};

export default App;

5. Geschützte Routen

Um geschützte Routen zu implementieren, können Sie eine benutzerdefinierte PrivateRoute-Komponente erstellen:

import { Navigate, Outlet } from 'react-router-dom';

const useAuth = () => {
  const user = { loggedIn: true }; // Replace with actual auth logic
  return user && user.loggedIn;
};

const PrivateRoute = () => {
  const isAuth = useAuth();
  return isAuth ?  : ;
};

const App = () => {
  return (
    } />
        }>
          } />
        
      
  );
};

export default App;

6. Programmatische Navigation

Manchmal möchten Sie möglicherweise programmgesteuert navigieren, beispielsweise nach der Übermittlung eines Formulars. Verwenden Sie den useNavigate-Hook in React Router v6:

import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Login logic here...
    navigate('/dashboard');
  };

  return (
    

      
Login
      Login
    
  );
};

export default Login;

7. 404 Seiten

Behandeln Sie 404-Fehler (nicht gefunden), indem Sie eine Catch-All-Route erstellen:

const NotFound = () => 
404 - Page Not Found
;

const App = () => {
  return (
    } />
        } />
        } />
      
  );
};

export default App;

8. Leistungsüberlegungen

Bei großen Anwendungen können Lazy-Loading-Routen die Leistung verbessern. So implementieren Sie Lazy Loading mit React.lazy() und Suspense:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    Loading...}>
        } />
          } />
        
  );
};

export default App;