React Router 4 Regex-Pfad

In diesem Artikel lernen wir, wie man die Regex zu den react-router-Pfads hinzufügt. Beim Erstellen der Pfade mit der ID oder Zeichenfolge muss die Zeichenfolge validiert werden, von der wir die Anforderung erhalten.

Die regulären Ausdrücke ermöglichen es uns, die Zeichenfolgen zu validieren.

Verwenden Sie den react-router V4, um Regex zum Pfad hinzuzufügen

In React.js können wir die verschiedenen Routen mit der Bibliothek react-router erstellen. Für jede Route müssen wir die Pfade angeben, und wir können den regulären Ausdruck im Pfad hinzufügen, wenn die Parameter, die wir im Pfad erhalten, validiert werden müssen.

Im folgenden Beispiel haben wir drei verschiedene Routen erstellt. In der ersten und zweiten Route haben wir den regulären Ausdruck zum Pfad hinzugefügt.

Außerdem haben wir exact={false} als Prop übergeben, um die exakte Übereinstimmung für die Komponente Home zu deaktivieren. Wenn also eine Route nicht übereinstimmt, können wir Benutzer auf die Route Home umleiten.

Die erste Route akzeptiert die Zeichenfolge, die Zahlen und Buchstaben enthält, und die zweite akzeptiert nur Zahlen. Wenn die Routen nicht perfekt übereinstimmen, wird die Startseite angezeigt.

Beispielcode:

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
//  Different components
function Home() {
  return <h2>This is Home Page.</h2>;
}
function About() {
  return <h2>This is About Page.</h2>;
}
function UserDetails() {
  return <h2>This is User Details Page.</h2>;
}
export default function App() {
  return (
    <>
    {/* Router for different paths */}
      <Router>
        <Switch>
          {/* route = /user/id */}
          <Route
            path="/user/:id(0-9a-f]{8})?"
            component={UserDetails}
            exact={true}
          />
          {/* route = /id */}
          <Route path="/:id(\d+)" component={About} exact={true} />
          <Route path="/" component={Home} exact={false} />
        </Switch>
      </Router>
    </>
  );
}

Ausgang:

Wenn wir zu einem Pfad wie user/234edf43 gehen, wird die Komponente UserDetails angezeigt.

Wenn wir zu einem Pfad wie /1234 gehen, wird die Komponente About angezeigt.

Der Pfad wie /abcd12 zeigt die Komponente Home, da jede andere Route nicht übereinstimmt.

Außerdem können Benutzer reguläre Ausdrücke gemäß den Anforderungen ändern, und wenn der Benutzer feststellt, dass der reguläre Ausdruck nicht richtig funktioniert, fügen Sie das Fragezeichen am Ende des regulären Ausdrucks hinzu, wie wir es in der ersten Route hinzugefügt haben.