Implementierung der automatischen Konstruktionsweiterleitung von React

//Es ist eine Routing-Konfiguration erforderlich, bei der es sich um ein Array handelt, das Discover von "../pages/Discover" importiert.
importiere Djradio aus "../pages/Discover/Djradio"
Playlist importieren aus "../pages/Discover/Playlist"
Topliste importieren aus "../pages/Discover/Toplist"
Freunde aus "../pages/Friends" importieren
Importiere Mine aus "../pages/Mine"
importiere Page404 von "../pages/Page404"
const Routen = [
    {
        Pfad: "/Freunde",
        Komponente: Freunde
    },
    {
        Pfad: "/mine",
        Komponente: Mine
    },
    
    {
        Pfad: "/discover",
        Komponente: Entdecken,
        Kinder: [
            {
                Pfad: "/discover/djradio",
                Komponente: Djradio
            },
            {
                Pfad: "/discover/playlist",
                Komponente: Playlist

            },
            {
                Pfad: "/discover/toplist",
                Komponente: Topliste
            }
        ]
    },
    {//Seite 404 Diese Konfiguration muss nach allen Routing-Konfigurationen folgen: Pfad: "*",
        Komponente: Seite 404
    }
]

Standardrouten exportieren

├─Entdecken
│ │ abc.js
│ │ index.js
│ │
│ ├─Djradio
│ │ │ index.js
│ │ │ lf.js
│ │ │
│ │ └─gv
│ │ index.js
│ │
│ ├─Wiedergabeliste
│ │ index.js
│ │
│ └─Topliste
│ index.js
│
├─Unterhaltung
│ index.js
│
├─Freunde
│ index.js
│ xb.js
│
├─Meins
│ index.js
│
└─Seite 404
        index.js

//Grundlegende Routing-Komponenten einführen (um npm i react-router-dom im Projekt zu installieren)
importiere {HashRouter als Router,Route} aus „react-router-dom“
Klasse Demo erweitert React.Component {
    machen(){
        //Cornerstone Routing <Router>
            //Die Routing-Rezeptkomponente stimmt mit der Komponente über den Pfad überein
            <Routenpfad="/" Komponente={Home}/>
             <Routenpfad="/mine" component={Mine}/>
        </Router>
    }
}

//Diese Datei kompiliert die Routen durch die Routenkonfiguration. Importieren Sie React von „react“.
importiere { Switch, Route } von „react-router-dom“;
exportiere Standardklasse CompileRouter erweitert React.Component {
    Konstruktor() {
        super()
        dieser.Zustand = {
            C: []
        }
    }
    renderRoute() {
        let { routes } = this.props; //Routing-Konfiguration für Routen abrufen //1. Routenkomponente über Routen generieren //Sicherstellen, dass Routen ein Array sind // console.log(routes)
        //render ruft componentDidMount und componentWillUnmount nicht wiederholt auf, wenn (Array.isArray(routes) && routes.length > 0) {
            // Sicherstellen, dass die eingehenden Routen ein Array sind // Durchlaufen Sie die eingehenden Routen
            let finalRoutes = routes.map(route => {
                //Jede Route sieht so aus {path:"xxx",component:"xxx"}
                //Wenn die Route untergeordnete Knoten hat {path:"xxx",component:"xxx",children:[{path:"xxx"}]}
                zurück <Routenpfad={route.path} Schlüssel={route.path} render={
                       // Der Zweck besteht darin, dass wir, wenn die Route verschachtelte Routen hat, die Konfigurationsdaten in den untergeordneten Elementen der Route an diese Komponente übergeben können, sodass die Komponente die verschachtelten Routen kompilieren kann, wenn CompileRouter erneut aufgerufen wird() => <route.component routes={route.children} />
                } />
            })

            dies.setState({
                c: finalRoutes
            })
        } anders {
            throw new Error('Routen müssen ein Array sein und ihre Länge muss größer als 0 sein')
        }
    }
    componentDidMount() {
        // Stellen Sie sicher, dass renderRoute zum ersten Mal aufgerufen wird, um die Routenkomponente this.renderRoute() zu berechnen
    }
    rendern() {
        lass { c } = dieser.Zustand;
        zurückkehren (
            <Schalter>
                {C}
            </Schalter>
        )
    }
}

React von „react“ importieren
importiere { HashRouter als Router, Link } von 'react-router-dom'
//Stellen Sie unseren gekapselten CompileRouter vor. Importieren Sie CompileRouter von "./utils/compileRouter".
//Importieren Sie die in 1 import routes from "./router" definierten Routing-Konfigurationsdaten.
console.log(Routen)
Klasse App erweitert React.Component {
    rendern() {
        zurückkehren (
            <Router>
                <Link to="/friends">Freunde</Link>
                |
                <Link to="/discover">Entdecken</Link>
                |
                <Link zu="/mine">Mein</Link>
                {/*Als Ansichtskomponente von Vue-Router müssen wir die Routing-Konfigurationsdaten übergeben*/}
                <CompileRouter routes={routes} />
            </Router>
        )
    }
}

Standard-App exportieren

React von „react“ importieren
importiere { Link } von "react-router-dom"

importiere CompileRouter von "../../utils/compileRouter"
Funktion Discover(Requisiten) {

    let { routes } = props //Diese Daten werden von den untergeordneten Elementen übergeben, wenn die ComileRouter-Komponente kompiliert wird
    // console.log(Routen)
    let links = routes.map(route => {
        zurückkehren (
            <li Schlüssel={Route.Pfad}>
                <Link zu={route.path}>{route.path}</Link>
            </li>
        )
    })
    zurückkehren (
        <Feldsatz>
            <legend>Entdeckung</legend>
            <h1>Ich habe festgestellt, dass man nicht einfach mehr heißes Wasser trinken kann</h1>
            <ul>
                {links}
            </ul>
            {/*Kerncode, Sie können ihn hier erneut verwenden, um die Route durch die untergeordneten Daten zu rendern*/}
            <CompileRouter routes={routes} />
        </Feldsatz>
    )
}
Entdecken.meta = {
    Titel: "Entdeckung",
    Symbol: ""
}
Exportieren Standard Entdecken

erfordern.Kontext(
  Verzeichnis,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (Modus = "Synchronisieren")
);

erfordern.context('./test', false, /\.test\.js$/);
//(Erstellen) Sie einen Kontext, in dem die Datei aus dem Testverzeichnis stammt und die Anfrage mit „.test.js“ endet.
require.context('../', true, /\.stories\.js$/);
// (Erstellen) Sie einen Kontext, in dem alle Dateien aus dem übergeordneten Ordner und allen seinen Unterordnern stammen und die Anfrage mit „.stories.js“ endet.

lass p = require.context("...",true,"xxx")
p.resolve("ein Pfad")

let-Komponenten = require.context('../pages', true, /\.js$/, 'sync')

let paths = components.keys() //Adressen aller importierten Dateien abrufen // console.log(paths)
let routes = paths.map(path => {
    let Komponente = Komponenten(Pfad).Standard
    Pfad = Pfad.substr(1).replace(/\/\w+\.js$/,"")
    zurückkehren {
        Weg,
        Komponente
    }
})
console.log(Routen)

let context = require.context("../pages", true, /\.js$/);

let paths = context.keys() //Pfade aller Dateien abrufen

let context = require.context("../pages", true, /\.js$/);

let paths = context.keys() //Pfade aller Dateien abrufen let routes = paths.map(path => {
    //Die importierten Komponenten stapelweise abrufen let component = context(path).default;
    console.log(Komponente)
    })

//Was ist der Zweck?
//Erstelle eine Routing-Konfiguration const routes = [
     {
         Weg: "",
         Komponente:xxx
          Kinder:[
                 {
                     Pfad: „xxx“
                     Komponente:xxx
                 }
            ]
     }
 ]

//erfordern.Kontext()

// 1. Ein zu durchsuchendes Verzeichnis,
// 2. Ein Flag, das angibt, ob auch die Unterverzeichnisse durchsucht werden sollen. 
// 3. Ein regulärer Ausdruck, der mit Dateien übereinstimmt.
let context = require.context("../pages", true, /\.js$/);

let paths = context.keys() //Pfade aller Dateien abrufen let routes = paths.map(path => {
    //Die importierten Komponenten stapelweise abrufen let component = context(path).default;
    //Erweiterte Komponentenattribute zur Vereinfachung der Menüdarstellung let meta = component['meta'] || {}
    //console.log(Pfad)
    //Der Zweck dieses regulären Ausdrucks //Da die Adresse ./Discover/Djradio/index.js lautet, kann dieser Adresstyp nicht direkt verwendet werden und muss daher verarbeitet werden //1. Entfernen Sie dann das erste "." und das Ergebnis ist /Discover/Djradio/index.js
    //2. Nach der Verarbeitung kann es immer noch nicht direkt verwendet werden, da wir /Discover/Djradio erwarten. Daher verwenden wir reguläre Ausdrücke, um index.js zu beenden. //3. Es ist möglich, dass der nachfolgende Pfad kein Ordner ist und das Ergebnis /Discover/abc.js ist. Der Suffixname kann im Pfadattribut der Routing-Konfiguration nicht verwendet werden. Daher wird der Suffixname .js durch den regulären Ausdruck path = path.substr(1).replace(/(\/index\.js|\.js)$/, "") ersetzt.
    // console.log(Pfad)
    zurückkehren {
        Weg,
        Komponente,
        Meta
    }
})

Funktion convertTree(Routen) {
    lass treeArr = [];
    //1. Verarbeiten Sie die Daten und verarbeiten Sie die ID und das übergeordnete Element jedes Datenelements (allgemein bekannt als „Wohin geht Papa?“).
    Routen.fürJedes(Route => {
        let comparePaths = route.path.substr(1).split("/")
        // console.log(Pfade vergleichen)
        wenn (comparePaths.length === 1) {
            // Zeigt an, dass es sich um einen Stammknoten handelt. Der Stammknoten muss keine parent_id hinzufügen
            route.id = comparePaths.join("")
        } anders {
            //Beschreibung hat einen übergeordneten Knoten//Verarbeite zuerst seine eigene ID
            route.id = comparePaths.join("");
            //comparePaths, außer dass das letzte Element parent_id ist
            VergleichePfade.pop()
            route.parent_id = comparePaths.join("")
        }
    })
    //2. Alle Daten haben die ID des übergeordneten Knotens gefunden. Als nächstes folgt die eigentliche Suche nach dem übergeordneten Knoten: routes.forEach(route => {
        //Beurteilen Sie, ob die aktuelle Route eine parent_id hat
        wenn (route.übergeordnete_id) {
            //Die Route mit dem übergeordneten Knoten //id===parent_id ist der übergeordnete Knoten der aktuellen Route let target = routes.find(v => v.id === route.parent_id);
            //Beurteilen, ob der übergeordnete Knoten das Attribut „children“ hat, if (!target.children) {
                Ziel.Kinder = []
            }
            Ziel.Kinder.Push(Route)
        } anders {
            treeArr.push(Route)
        }
    })

    Rückgabewert treeArr
}

//erfordern.Kontext()

// 1. Ein zu durchsuchendes Verzeichnis,
// 2. Ein Flag, das angibt, ob auch die Unterverzeichnisse durchsucht werden sollen. 
// 3. Ein regulärer Ausdruck, der mit Dateien übereinstimmt.
let context = require.context("../pages", true, /\.js$/);

let paths = context.keys() //Pfade aller Dateien abrufen let routes = paths.map(path => {
    //Die importierten Komponenten stapelweise abrufen let component = context(path).default;
    //Erweiterte Komponentenattribute zur Vereinfachung der Menüdarstellung let meta = component['meta'] || {}
    //console.log(Pfad)
    //Der Zweck dieses regulären Ausdrucks //Da die Adresse ./Discover/Djradio/index.js lautet, kann dieser Adresstyp nicht direkt verwendet werden und muss daher verarbeitet werden //1. Entfernen Sie dann das erste "." und das Ergebnis ist /Discover/Djradio/index.js
    //2. Nach der Verarbeitung kann es immer noch nicht direkt verwendet werden, da wir /Discover/Djradio erwarten. Daher verwenden wir reguläre Ausdrücke, um index.js zu beenden. //3. Es ist möglich, dass der nachfolgende Pfad kein Ordner ist und das Ergebnis /Discover/abc.js ist. Der Suffixname kann im Pfadattribut der Routing-Konfiguration nicht verwendet werden. Daher wird der Suffixname .js durch den regulären Ausdruck path = path.substr(1).replace(/(\/index\.js|\.js)$/, "") ersetzt.
    // console.log(Pfad)
    zurückkehren {
        Weg,
        Komponente,
        Meta
    }
})
//Diese Art von Daten sind flache Daten und entsprechen nicht unseren Routing-Regeln. //Wir müssen einen Algorithmus erstellen, um die Zeitkomplexität so weit wie möglich auf o(n) zu reduzieren. //Kapseln Sie einen convertTree-Algorithmus mit einer Zeitkomplexität von o(n^2).
// console.log(Routen)

//Ausweis
//übergeordnete_ID

Funktion convertTree(Routen) {
    lass treeArr = [];
    //1. Verarbeiten Sie die Daten und verarbeiten Sie die ID und das übergeordnete Element jedes Datenelements (allgemein bekannt als „Wohin geht Papa?“).
    Routen.fürJedes(Route => {
        let comparePaths = route.path.substr(1).split("/")
        // console.log(Pfade vergleichen)
        wenn (comparePaths.length === 1) {
            // Zeigt an, dass es sich um einen Stammknoten handelt. Der Stammknoten muss keine parent_id hinzufügen
            route.id = comparePaths.join("")
        } anders {
            //Beschreibung hat einen übergeordneten Knoten//Verarbeite zuerst seine eigene ID
            route.id = comparePaths.join("");
            //comparePaths, außer dass das letzte Element parent_id ist
            VergleichePfade.pop()
            route.parent_id = comparePaths.join("")
        }
    })
    //2. Alle Daten haben die ID des übergeordneten Knotens gefunden. Als nächstes folgt die eigentliche Suche nach dem übergeordneten Knoten: routes.forEach(route => {
        //Beurteilen Sie, ob die aktuelle Route eine parent_id hat
        wenn (route.übergeordnete_id) {
            //Die Route mit dem übergeordneten Knoten //id===parent_id ist der übergeordnete Knoten der aktuellen Route let target = routes.find(v => v.id === route.parent_id);
            //Beurteilen, ob der übergeordnete Knoten das Attribut „children“ hat, if (!target.children) {
                Ziel.Kinder = []
            }
            Ziel.Kinder.Push(Route)
        } anders {
            treeArr.push(Route)
        }
    })

    Rückgabewert treeArr
}

exportiere standardmäßig convertTree(Routen)

//Ein Modul abrufen // console.log(p("./Discover/index.js").default)

//Was ist der Zweck?
//Erstelle eine Routing-Konfiguration // const routes = [
// {
// Weg: "",
// Komponente,
// Kinder:[
// {Pfadkomponente}
// ]
// }
// ]