Details zur React Routing Link-Konfiguration

importiere React, {Component} von 'react'
//importiere {Route,BrowserRouter,Link} aus 'react-router-dom'
//BrowserRouter in Router umbenennen
importiere { BrowserRouter als Router, Link, Route } von 'react-router-dom'
importiere { Button } von 'antd';
importiere './App.css';

Funktion Home()
{
  zurückkehren(
      <div>Administrator-Startseite</div>
    )
}

Funktion Me(Requisiten)
{
  console.log(Eigenschaften)
  zurückkehren(
      <div>admin mein</div>
    )
}

Funktion Produkt (Requisiten)
{
  zurückkehren(
      <div>Administrator-Produktseite:{props.match.params.id}</div>
    )
}

exportiere Standardklasse App erweitert Komponente {
   Konstruktor()
    {
      super();
    }
    machen()
    {
    {/*Wenn der Pfad in Objektform geschrieben ist und mit dem unten angegebenen übereinstimmt, werden Pfadname, Suche und Hash automatisch mit dem URL-Pfad verknüpft und der Status sind die an die Komponente übergebenen Daten*/}
      let obj={Pfadname:"/me",Suche:'?Benutzername=admin',Hash:"#abc",Status:{Nachricht:'Hallo'}}
      zurückkehren(
        <div id='App'>
      {/*Sie können mehrere BrowserRouter angeben*/}
          <Router>
        
        {/*Da die Komponente auch HTML-Inhalte zurückgibt, können Sie über die Funktion, die als Komponente fungiert, direkt HTML-Inhalte zurückgeben, aber Sie können keine HTML-Inhalte direkt schreiben*/}
          <div>  
            <Routenpfad="/" genaue Komponente={()=><div>Route</div>}></Route>
            <Routenpfad="/Produkt" Komponente={()=><div>Produkt</div>}></Route>
            <Routenpfad="/me" component={()=><div>me</div>}></Route>
          </div>
          {/*<Routenpfad="/" Komponente={Funktion(){return <div>首页2</div>}}></Route>*/}

          </Router>
        

          
          {/*Es kann nur einen Root-Container innerhalb des BrowserRouters geben, um andere Inhalte einzuschließen*/}
        {/*Nachdem Sie basename='/xx' hinzugefügt haben und auf „Link“ klicken, um zu anderen Routen zu springen, wird der URL /xx an den Anfang des Routennamens angehängt, sodass sowohl der Routenpfad als auch der Routenpfad mit hinzugefügtem Administrator mit der Route übereinstimmen können*/}
          <Router-Basisname='/admin'>
            <div>
                <div Klassenname='nav'>
                    <Link zu='/'>Startseite</Link>
                    <Link to='/product/123'>Produkt</Link>
                  {/*Sie können Props in der entsprechenden Komponente ausgeben, um die Informationen des übergebenen Objekts anzuzeigen, „Replace“ hinzufügen, um die vorherige Seite vor dem Sprung durch die aktuelle Seite zu ersetzen, und nur die aktuelle Seite in den Stapel verschieben*/}
                    <Link to={obj} replace>Persönliches Zentrum</Link>
                </div>

                <Routenpfad="/" genaue Komponente={Home}></Route>
                <Routenpfad="/produkt/:id" Komponente={Produkt}></Route>
                <Routenpfad="/me" genaue Komponente={Me}></Route>
            </div>
          </Router>

        </div>
        
      )
    }
}