Håndtering af indlejret navigation og navigation på tværs af apps
Lær at koordinere indlejrede routes, der ejes af de enkelte micro frontends, og navigere problemfrit fra én MFE til en anden.
Håndtering af indlejret navigation og navigation på tværs af apps er en gratis Mikrofrontendarkitektur med Module Federation-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Mikrofrontendarkitektur med Module Federation, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.
Udfordringen ved indlejret routing
I federerede apps ejer skallen ruterne på øverste niveau, mens hvert mikrofrontend ejer sine egne interne (indlejrede) ruter. Koordineringen mellem dem er kernen i MFE-navigation.
Ejerskab af ruter
En tydelig regel hjælper: Skallen knytter et ruteforstavelse til et MFE, og alt under dette forstavelse tilhører MFE'et.
/products/* -> product MFE
/cart/* -> cart MFE
/account/* -> account MFEMontering af et MFE på et forstavelse
Skallen gengiver MFE'et for et forstavelse og lader det håndtere det resterende stisegment.
<Route path="/products/*" element={<ProductApp />} />Indlejrede ruter i et MFE
MFE'et definerer sin egen router med afgrænsning til sit forstavelse, så det styrer sine undersider, uden at skallen behøver kende dem.
<Routes>
<Route path="/" element={<List />} />
<Route path=":id" element={<Detail />} />
</Routes>basename til afgrænsede routere
Giv MFE-routeren en basename, der matcher dens forstavelse, så dens links løses korrekt i den større app.
<BrowserRouter basename="/products">
...
</BrowserRouter>Navigation på tværs af apps
Nogle gange skal ét MFE sende brugeren ind i et andet (f.eks. når indkøbskurven linker til betaling). Udfordringen er, at det ikke bør importere det andet MFE's router direkte.
Navigation via URL'en
Den reneste navigation på tværs af apps ændrer blot URL'en. Skallens router monterer derefter det rigtige MFE — uden behov for direkte kobling.
history.pushState({}, "", "/checkout");
window.dispatchEvent(new PopStateEvent("popstate"));En delt navigationstjeneste
For at undgå manuelle history-løsninger kan skallen eksponere en lille navigate-funktion, som MFE'er kalder, så navigationslogikken samles ét sted.
import { navigate } from "shell/navigation";
navigate("/checkout");Synkronisering af routere
Alle MFE'er skal reagere på den samme browserhistorik. Ved at bruge én historikkilde (browserens History-API) holdes skallen og alle MFE-routere synkroniseret ved tilbage- og fremnavigation.
Undgåelse af rutekonflikter
To MFE'er, der gør krav på overlappende forstavelse, skaber uforudsigelig gengivelse. Vedligehold ét register over ruteforstavelser for at sikre, at de aldrig kolliderer.
Lazy loading pr. rute
Kombinér indlejret routing med lazy loading: Hent først et MFE-bundt, når brugeren navigerer til dets forstavelse, så den indledende indlæsning holdes lille.
const ProductApp = React.lazy(() => import("products/App"));Hurtigt tjek
Test din viden om indlejret routing.
Opsummering
Du har lært om indlejret navigation og navigation på tværs af apps:
- Skallen ejer forstavelse; MFE'er ejer indlejrede ruter
- Brug
basenametil at afgrænse MFE-routere - Navigér på tværs af apps via URL'en eller en delt tjeneste
- Del én kilde til browserhistorikken
- Forebyg konflikter mellem forstavelse, og indlæs efter behov pr. rute
Koordineret routing får navigation i federerede apps til at føles problemfri.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Håndtering af indlejret navigation og navigation på tværs af apps” gratis?
Ja — hele teksten til “Håndtering af indlejret navigation og navigation på tværs af apps” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Mikrofrontendarkitektur med Module Federation-kurset, skal du opgradere til CoddyKit PRO. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Håndtering af indlejret navigation og navigation på tværs af apps”?
Lær at koordinere indlejrede routes, der ejes af de enkelte micro frontends, og navigere problemfrit fra én MFE til en anden. Du øver dig i Mikrofrontendarkitektur med Module Federation med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Mikrofrontendarkitektur med Module Federation?
Der kræves ingen tidligere erfaring. Mikrofrontendarkitektur med Module Federation på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Håndtering af indlejret navigation og navigation på tværs af apps”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Mikrofrontendarkitektur med Module Federation-lektion?
Ja. Alle Mikrofrontendarkitektur med Module Federation-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Centraliseret routingstrategi
- Implementering af federeret routing
- Deep linking og URL-håndtering
- Håndtering af indlejret navigation og navigation på tværs af apps