Bedingtes Routing in React JS

Manchmal müssen wir den Benutzer auf eine andere Seite verweisen. Wenn Ihr Benutzer beispielsweise ein Formular mit ungültigen Informationen ausgefüllt hat, können Sie den Benutzer auf eine andere Seite weiterleiten, die den Benutzer über seine ungültigen Daten informiert.

In React JS ist es als Routing bekannt. Es wird hauptsächlich verwendet, um Benutzer an einen anderen Ort zu verweisen.

Es gibt ein Routing, das als bedingtes Routing bekannt ist und Benutzer hauptsächlich basierend auf bestimmten Bedingungen auf eine andere Seite weiterleitet.

Dieser Artikel zeigt, wie wir bedingtes Routing in unserer Webanwendung einrichten können. Außerdem werden wir notwendige Beispiele und Erklärungen sehen, um das Thema einfacher zu machen.

Wenden Sie bedingtes Routing in einer Webanwendung an

In unserem Beispiel unten zeigen wir, wie wir bedingtes Routing in einer Webanwendung einrichten können. Sehen Sie sich die folgenden Codes an.

Beispielcode – App.js:

// importing necessary packages and files
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Router from './router'

export default function App() {
  var Newpage = false;

   // Applying condition
   if (Newpage) {
    return (
       <BrowserRouter>
          <Routes>
            <Route path="*" element={<Router />} />
          </Routes>
       </BrowserRouter>
    )
   } else {
   return (
    <h1>Page not changed</h1>
   )
   }
}

Es gibt auch eine kürzere Version des obigen Codes, die unten gezeigt wird:

Beispielcode – App.js:

// importing necessary packages and files
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Router from './router'

export default function App() {
    var Newpage = true;
    return (
       <BrowserRouter>
          <Routes>
            <Route path="/" element={ Newpage ? ( <Router />) : (<h1>No page found...</h1>)} />
          </Routes>
       </BrowserRouter>
    )
}

In unserem obigen Beispiel haben wir die Inline-Bedingung in der Zeile angewendet:

<Route path="/" element={ Newpage ? ( <Router />) : (<h1>No page found...</h1>)} />

Außerdem haben wir bereits den Zweck jedes Codeblocks befohlen. Schauen wir uns nun die Datei index.js an, die wie folgt aussieht:

Beispielcode- index.js:

// importing necessary packages and files
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Nachdem Sie nun mit allen Dateien fertig sind, erhalten Sie die folgende Ausgabe in Ihrem Browser:

Dieses Tutorial verwendet das Paket react-select, daher müssen Sie dieses Paket installieren, bevor Sie die Anwendung ausführen. Diese können Sie ganz einfach mit npm installieren.

Die in diesem Artikel geteilten Beispielcodes wurden im React JS-Projekt geschrieben. Und um ein React-Projekt auszuführen, muss Ihr System die neueste Version von Node JS enthalten.

Wenn Ihr System kein Node JS enthält, installieren Sie es zuerst.