Basierend auf dem Teil der URL, den der Router verwendet, um den Inhalt zu verfolgen, den der Benutzer anzuzeigen versucht, bietet React Router drei verschiedene Arten von Routern:

Voraussetzung: Bevor Sie mit diesem Artikel beginnen, müssen Sie über Grundkenntnisse in React Router verfügen .

Memory Router: Memory Router behält die URL-Änderungen im Speicher und nicht in den Benutzerbrowsern. Es behält den Verlauf der URL im Speicher (es liest oder schreibt nicht in die Adressleiste, sodass der Benutzer die Zurück-Schaltfläche des Bowsers sowie die Vorwärts-Schaltfläche nicht verwenden kann. Es ändert die URL in Ihrem Browser nicht. Es ist sehr nützlich für Test- und Nicht-Browser-Umgebungen wie React Native.

  • Syntax:
    importiere {MemoryRouter als Router} aus 'react-router-dom';
  • Programm:




    import React, { Component } from 'react'; 
    import { MemoryRouter as Router, Route, Link, Switch }
                        from 'react-router-dom'; 
    import Home from './component/home'; 
    import About from './component/about'; 
    import Contact from './component/contact'; 
    import './App.css'; 
       
    class App extends Component { 
      render() { 
          return ( 
            <Router> 
                <div className="App"> 
                    <ul className="App-header"> 
                      <li> 
                          <Link to="/">Home</Link> 
                      </li> 
                      <li> 
                          <Link to="/about">
                            About Us
                          </Link> 
                      </li> 
                      <li> 
                          <Link to="/contact">
                            Contact Us
                          </Link> 
                      </li> 
                    </ul> 
                    <Switch> 
                      <Route exact path='/' 
                          component={Home}>
                      </Route> 
                      <Route exact path='/about'
                          component={About}>
                      </Route> 
                      <Route exact path='/contact' 
                          component={Contact}>
                      </Route> 
                    </Switch> 
                </div> 
            </Router> 
        ); 
      } 
    } 
       
    export default App; 
  • Ausgabe:

Browser-Router: Er verwendet die HTML 5-Verlaufs-API (d. h. pushState-, replaceState- und popState-API), um Ihre Benutzeroberfläche mit der URL synchron zu halten. Es leitet als normale URL im Browser weiter und geht davon aus, dass der Server die gesamte Anforderungs-URL (z. B. /, /about) verarbeitet und auf root verweist index.html. Es akzeptiert ForceRefresh-Requisiten, um ältere Browser zu unterstützen, die die HTML 5-PushState-API nicht unterstützen

  • Syntax:
    importiere { BrowserRouter als Router } aus 'react-router-dom';
  • Programm:




    import React, { Component } from 'react'; 
    import { BrowserRouter as Router, Route, Link, Switch }
                      from 'react-router-dom'; 
      
    import Home from './component/home'; 
    import About from './component/about'; 
    import Contact from './component/contact'; 
    import './App.css'; 
       
    class App extends Component { 
      render() { 
          return ( 
            <Router> 
                <div className="App"> 
                    <ul className="App-header"> 
                      <li> 
                          <Link to="/">Home</Link> 
                      </li> 
                      <li> 
                          <Link to="/about">About Us</Link> 
                      </li> 
                      <li> 
                          <Link to="/contact">
                            Contact Us
                          </Link> 
                      </li> 
                    </ul> 
                    <Switch> 
                      <Route exact path='/' 
                          component={Home}>
                      </Route> 
                      <Route exact path='/about' 
                          component={About}>
                      </Route> 
                      <Route exact path='/contact' 
                          component={Contact}>
                      </Route> 
                    </Switch> 
                </div> 
            </Router> 
        ); 
      } 
    } 
       
    export default App; 
  • Ausgabe:

Hash-Router: Hash-Router verwendet clientseitiges Hash-Routing. Es verwendet den Hash-Teil der URL (dh window.location.hash), um Ihre Benutzeroberfläche mit der URL synchron zu halten. Der Hash-Teil der URL wird nicht vom Server verarbeitet, der Server sendet immer die index.html für jede Requests und ignoriert den Hash-Wert. Es ist keine Konfiguration auf dem Server erforderlich, um Routen zu verarbeiten. Es wird verwendet, um ältere Browser zu unterstützen, die normalerweise keine HTML-PushState-API unterstützen. Es ist sehr nützlich für ältere Browser oder Sie haben keine Serverlogik, um die Clientseite zu handhaben. Diese Route wird vom React-Router-Dom-Team nicht empfohlen.

  • Syntax:
    importiere {HashRouter als Router} aus 'react-router-dom';
  • Programm:




    import React, { Component } from 'react'; 
    import { HashRouter as Router, Route, Link, Switch }
                  from 'react-router-dom'; 
    import Home from './component/home'; 
    import About from './component/about'; 
    import Contact from './component/contact'; 
    import './App.css'; 
       
    class App extends Component { 
      render() { 
          return ( 
            <Router> 
                <div className="App"> 
                    <ul className="App-header"> 
                      <li> 
                          <Link to="/">Home</Link> 
                      </li> 
                      <li> 
                          <Link to="/about">About Us</Link> 
                      </li> 
                      <li> 
                          <Link to="/contact">
                              Contact Us
                          </Link> 
                      </li> 
                    </ul> 
                    <Switch> 
                      <Route exact path='/' 
                          component={Home}>
                      </Route> 
                      <Route exact path='/about' 
                          component={About}>
                      </Route> 
                      <Route exact path='/contact' 
                          component={Contact}>
                      </Route> 
                    </Switch> 
                </div> 
            </Router> 
        ); 
      } 
    } 
       
    export default App;
  • Syntax: