React Tutorial #8 - Routing

_Discord:_

_Unterstützt mich - Danke!:_

[fs]

Super Reihe, macht echt Spaß! Es gab wohl ein Update, ich musste <Router><Routes><Route> schachteln, anders habe ich es nicht zum laufen bekommen.

[phuzion]

2022-Update (Router Version 6), mein Beispiel:


import React from "react";

import './App.css';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";

import reportWebVitals from './reportWebVitals';
import Clock from "./components/clock";
import Button from "./components/button";
import MagicButton from "./components/button";
import MagicTable from "./components/table";
import CurrencyCalculator from "./components/currency";
import ErrorPage from "./components/error";


function App() {
return(
<Router>
<Routes>
<Route path="/" element={<Clock />} />
<Route path="/button" element={<MagicTable />} />
<Route path="/currency" element={<CurrencyCalculator />} />
<Route path={'*'} element={<ErrorPage />} />
</Routes>
</Router>
);
}

export default App;

[HolonSolutionsDE]

Ich habe es etwas anders Lösen müssen, aber ich denke das liegt an der Version. Hier meine Lösung:

import './App.css';



import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';



import CurrencyCalculator from
import Clock from './pages/Clock/clock';
import MagicTable from





function App() {
return (
<>


<Router>
<Routes>
<Route path='/' element={<Clock/>} />
<Route path='/CurrencyCalculator' />
<Route path='/MagicTable' element={<MagicTable/>} />
</Routes>
</Router>

</>
);

}


export default App ;

[itsreallyme]

Moinsen, zunächst einmal wie immer: Klasse Video! An Deinem Stil sollte sich mal so manch ein Tutor orientieren. Weiter so!
Zum Thema "Weiter so" hätte ich auch direkt eine Anfrage: Vielleicht hast Du in absehbarer Zeit ja Zeit und Lust doch nochmal ein React/Node.js/MongoDB-Video zu machen, in dem man mal alle Komponenten zusammen hat. Wäre wirklich super!
Greetz

[steffenpfeil]

Hey Morpheus, auch von mir vielen Dank für die ganzen Videos!

Ich hab mich vor einem halben Jahr schon einmal an React gewagt, habe ein paar Sachen aber bis heute nicht ans Laufen bekommen.
Könntest du vielleicht noch ein Video zu Redux, Formvalidierung oder Komponentenbibliotheken (Bootstrap, MaterialUI) machen?

Deine Videos sind echt verständlich und wer weiß, vielleicht verstehe ich das ja dadurch besser :D

[TheBlackKnight]

Sehr gutes Video. Mach weiter so. Hab dadurch vieles gelernt.

[rolandmeves]

Also ich bekomm es mit component={Clock} nicht hin. So wie es Tim Mayer gepostet hat läuft es auch bei mir, jedoch verhält es sich dann wie die im Video beschriebene zweite Variante mit "exact". Gibt es da eine Lösung für die erste Variante?

[MrCarsten]

Als was mich noch brennend interessieren würde, was du aber auch schon so halb angekündigt hast, wäre styling mit CSS (also in der Componente) und dann würden mich Reducer, sehr gerne unter Verwendung von Redux, interessieren. :-) Danke für deine Arbeit, die du hier reinsteckst, du solltest noch mehr Werbung für Patreon machen, ich finde das ist es voll wert.

[Noah-vmid]

Moin, ich habe jetzt deine react abgeschlossen und deine Flask Reihe angefangen und hätte mal eine Frage: Sollte man das Routing über Flask machen oder über React?

[mikeschoch]

Hi Morpheus,
wenn ich das genau so mache, wie du es beschreibst, bekomme ich folgenden Fehler:
A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
Wenn ich es dann in die einzelnen <Route> Elemente in <Routes> packe, ist zwar der Fehler weg, aber es wird gar nichts angezeigt.
Was mache ich falsch?

[maximiliankromer]

Hey, eine Sache die ich nicht ganz verstehe ist, wie das Routing funktioniert, wenn man direkt eine Unterseite aufruft. React läuft doch komplett clientseitig und wenn man diese Unterseite aufruft, bevor man die Index Datei geöffnet hat und sich der ReactRouter aktivieren konnte gelangt der Request an den Server, welcher dann diesen Pfad in den Dateien sucht oder hab ich etwas falsch verstanden?
Mfg Max

[ahrcdovlzkmylahqtbmftdw]

Gut erklärt, müsste nachvollziebar sein für menschen die js lernen wollen. Gutes Video

[akanahketo]

Neuerdings muss Route in Routes stehen. Das Verhalten das bei / die Uhr kommt und der Kalkulator gibt es in neueren Versionen nicht. Es gibt ein Problem wenn man mehrere Routen in einen Pfad verpackt. Bei mir wird der MagicTable im Route-Tag gar nicht angezeigt d.h. als leere seite, obwohl es über die Index.js anzeigbar war.

[simplycode]

Hey,


welches Aufnahmeprogramm nutzt du?

[yosephkoehler]

Wie lange wird die Playlist ungefähr werden?

[mokkalp]

Wie funktioniert Routing eigentlich, wenn man das build auf den Server schiebt?

Bzw. Warum funktioniert es nicht ?

[scaledesign]

Ich bin bei der Geschichte mit Backend noch Anfänger hatte mal mit Django angefangen, jetzt habe Ich aber eine Frage, wenn Ich das "routing" mit den Urls mit React mache, vermischt sich das dann nicht mit dem Routing im Backend als Beispiel: Ich will das wenn der Nutzer eine Bestimmte Seite betritt in Django eine Funktion aufrufen, welche wiederum eine HTML Datei rendert bzw. in diesem Fall eine Javascript Datei. Jedoch mach ich das ja nun nicht mehr im Backend sondern im Frontend, hat dies negative Auswirkungen?

[bin_offline]

ja ja es ist wichtig sein Handy zu rooten,
das Gegegenteil sagt mein Vater auch immer.