Reagieren-Router: Holen Sie sich alle Routen als array

Gibt es eine Bibliothek, die meiner route-Instanz in ein array von Pfaden?

Beispiel:

    <Route path="/" component={App}>
      <Route path="author" component={Author}>
        <Route path="about" component={About}/>
      </Route>
      <Route path="users" component={Users} />
    </Route>

Ausgabe

['/', '/author', '/author/about', '/users']

Ich könnte schreiben, eine Funktion reduzieren, haben sich ein paar Zeilen code und lösen, aber ich Frage mich, ob es eine bestehende Bibliothek, die machen das für mich und kümmern sich um die verschiedenen Möglichkeiten, representating Strecken reagieren router.

  • was ist der Anwendungsfall?
  • Ich möchte ein plugin für webpack für statische site-generation. Kurz gesagt, ich veröffentlichen will meine app im github.io und ich bin mit router reagieren. Finden Sie dieses Projekt: github.com/markdalgleish/static-site-generator-webpack-plugin. Sie erwarten, dass ein array von Routen, deren Eintragung.
  • hier ist eine, die erzeugt XML-sitemap - reagieren-router-sitemap, aber ich denke, Sie sind besser dran mit einem einfachen reduzieren (wie Sie sagten), bis Sie mehr komplexe Routen
InformationsquelleAutor Alan Souza | 2016-06-13
  1. 12

    Als ich nichts gefunden, ich landete eine Bibliothek für das...

    https://github.com/alansouzati/react-router-to-array

    import React from 'react';
import { Route, IndexRoute } from 'react-router';
import reactRouterToArray from 'react-router-to-array';
//or var reactRouterToArray = require('react-router-to-array');

console.log(reactRouterToArray(
  <Route path="/" component={FakeComponent}>
    {/* just to test comments */}
    <IndexRoute component={FakeComponent} />
    <Route path="about" component={FakeComponent}>
      <Route path="home" component={FakeComponent} />
      <Route path="/home/:userId" component={FakeComponent} />
    </Route>
    <Route path="users" component={FakeComponent} />
    <Route path="*" component={FakeComponent} />
  </Route>)
); //outputs: ['/', '/about', '/about/home', '/users']
    InformationsquelleAutor Alan Souza
  2. 4

    Ich verstehe nicht, warum Sie eine Bibliothek. Ihre Routes verfügbar sein sollten als Array in die Requisiten.

    Beispiel:

    Reagieren-Router: Holen Sie sich alle Routen als array

    • Von Ihnen printscreen ich kann sehen, dass Sie mit einfachen Routen (als JSON-Objekt). Eine weitere Möglichkeit zur Darstellung einer route ist die Verwendung von JSX, der hat eine andere Struktur selbst, zum Beispiel: childRoutes wird dargestellt als Requisiten.Kinder. Eine weitere Einschränkung ist, dass ich noch eine single-level-array von strings, und diese Struktur ist immer noch verschachtelt.
    InformationsquelleAutor U r s u s
  3. 0

    Ich kürzlich eine Bibliothek, die speziell für diesen Zweck: https://github.com/elliottsj/react-router-query

    Es kann mit asynchronen Routen (d.h. getChildRoutes /getIndexRoute), und bietet nicht nur ein array von Pfaden, aber eine Reihe von "FlatRoute" Objekte, die den Pfad enthalten (fullPath), plus alle der ursprünglichen Eigenschaften der einzelnen route, und eine Reihe von "Eltern" - Routen:

    import { query } from 'react-router-query';

const routes = (
  <Route path="/" component={App}>
    <Route path="author" component={Author}>
      <Route path="about" component={About} />
    </Route>
    <Route path="users" component={Users} />
  </Route>
);

query('/', routes, (error, result) => {
  expect(result).toEqual([
    {
      fullPath: '/author/about'
      component: About,
      parents: [
        { path: '/', component: App },
        { path: 'author', component: Author },
      ],
    },
    {
      fullPath: '/users'
      component: Users,
      parents: [
        { path: '/', component: App },
      ],
    },
  ]);
});

    Beachten Sie, dass nur die "leaf" - Strecken sind enthalten in dem Ergebnis: es gibt keine "FlatRoute" Objekt für fullPath: '/' noch fullPath: '/author'. Dies ist zu verhindern, einschließlich Routen, die sind nur als layout für die Kind-Routen, z.B.

    <Route path="/" component={App}>
  <Route path="posts" component={PostLayout}>
    <Route path="1" component={Post1} />
    <Route path="2" component={Post2} />
    <Route path="3" component={Post3} />
  </Route>
</Route>

    Wenn Sie möchten, eine FlatRoute für /posts einfach ein IndexRoute:

    <Route path="/" component={App}>
  <Route path="posts">
    <IndexRoute component={Posts} />
    <Route path="1" component={Post1} />
    <Route path="2" component={Post2} />
    <Route path="3" component={Post3} />
  </Route>
</Route>
    InformationsquelleAutor Spencer
Schreibe einen Kommentar