SmashGrade / SmashGrade-App

https://www.smashgrade.ch
3 stars 0 forks source link

Konzept Routing #12

Closed robinaeschlimann closed 1 year ago

robinaeschlimann commented 1 year ago

In der App soll ein Routing verwendet werden. Da React das Routing nicht von Haus aus nicht automatisch unterstützt, muss eine Library (bspw. https://reactrouter.com/) Abhilfe schaffen.

Ein Konzept für eine Arbeit mit einer solchen Library muss somit erstellt werden.

Ausserdem soll eine Übersicht erstellt werden mit allen Routen (auch dynamische wie course/{1}), dies kann als Baum oder SiteMap oder in einer anderen geeigneten Form dargestellt werden.

Die Dokumentation soll hier gemacht werden: https://github.com/SmashGrade/SmashGrade-App/wiki/Routing

robinaeschlimann commented 1 year ago

@joshua-lehmann was meinst du, wenn wir den https://reactrouter.com/ verwenden?

Habe mit dem Tutorial zum Test den Router bei uns im Projekt eingebaut --> Hat problemlos funktioniert:

Image

Image

Image

joshua-lehmann commented 1 year ago

@robinaeschlimann Danke für deinen hilfreichen Input! Ja React Router ist so ziemlich der Standard denn die meisten inklusive wir bei der Arbeit verwenden. Es wäre definitiv eine sehr gute Option. Ich wollte aber noch den TanStack Router anschauen da dieser etwas neuer/moderner ist und im Gegensatz zum React Router 100% Type safe auch bei routes ist. Ausserdem bietet er auch direkt dinge wie Daten für eine Route laden/cachen. Denkst du, du könntest diesen auch mal austesten/vergleichen? Ist zwar aktuell noch in der Beta aber bereits stable und sollte demnächst aus der Beta kommen.

robinaeschlimann commented 1 year ago

Ich kann den gerne auch noch anschauen.

joshua-lehmann commented 1 year ago

@robinaeschlimann Konntest du den TanStack Router testen? Ist er wirklich komplizierter als der react router? Das Video ist vielleicht etwas älter aber zeigt die Vorteile: https://www.youtube.com/watch?v=LVzG3nncE4M&ab_channel=Theo-t3%E2%80%A4gg Ausserdem hier die Comparison page: https://tanstack.com/router/v1/docs/comparison Teste am besten beide Router in branches "side by side" und falls der TanStack Router gut funktioniert, würde ich gerne diesen probieren, sollte er deutlich komplexer sein, werden wir auf den sicheren Standard mit React Router setzen. Ausserdem kannst du dir bereits anhand der Mockups eine erste SiteMap überlegen (welche URL's könnte es geben und was könnten die dynamischen URL's sein (id's, search parameter etc.)