{"id":12386,"date":"2023-09-25T19:12:27","date_gmt":"2023-09-25T17:12:27","guid":{"rendered":"https:\/\/imaginario27.com\/?post_type=project&#038;p=12386"},"modified":"2024-04-21T17:14:34","modified_gmt":"2024-04-21T15:14:34","slug":"vanlife-eine-react-router-app-mit-geschuetzten-routen","status":"publish","type":"project","link":"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/","title":{"rendered":"Vanlife &#8211; Eine React-Router-App mit gesch\u00fctzten Routen"},"content":{"rendered":"<p>Vanlife ist eine Beispiel-React-Webanwendung, die die Verwendung von React Router und gesch\u00fctzten Routen demonstriert. Dieses Projekt dient als Ausgangspunkt f\u00fcr den Aufbau von Webanwendungen mit Authentifizierungs- und Routing-Funktionen. In dieser App haben wir eine grundlegende Struktur mit mehreren wichtigen Seiten und Funktionen implementiert:<\/p>\n<ul>\n<li>Startseite<\/li>\n<li>Host-Seite (gesch\u00fctzte Route) + einige gesch\u00fctzte Unterseiten<\/li>\n<li>About-Seite<\/li>\n<li>Van-Liste-Seite<\/li>\n<li>Van-Detailseite<\/li>\n<\/ul>\n<h2>Einige Screenshots<\/h2>\n<div id=\"jig1\" class=\"justified-image-grid jig-b26bb7f2a37af0b16a6a328c66542776 jig-preset-global jig-source-wp-gallery\"><div class=\"jig-clearfix\"><\/div><noscript id=\"jig1-html\" class=\"justified-image-grid-html\" data-lazy-src=\"skiplazyload\" data-src=\"skipunveillazyload\"><ul><li><a href=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2023\/09\/vanlife-home.jpg\"><img decoding=\"async\" src=\"https:\/\/imaginario27.com\/wp-content\/plugins\/justified-image-grid\/timthumb.php?src=https%3A%2F%2Fimaginario27.com%2Fwp-content%2Fuploads%2F2023%2F09%2Fvanlife-home-1024x716.jpg&amp;h=440&amp;q=90&amp;f=.webp\" alt=\"Vanlife - Home Page\" width=\"629\" height=\"440\" \/><\/a><p class=\"jig-HTMLdescription\">Vanlife - Home Page<\/p><\/li><li><a href=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2023\/09\/vanlife-host-dashboard.jpg\"><img decoding=\"async\" src=\"https:\/\/imaginario27.com\/wp-content\/plugins\/justified-image-grid\/timthumb.php?src=https%3A%2F%2Fimaginario27.com%2Fwp-content%2Fuploads%2F2023%2F09%2Fvanlife-host-dashboard-1024x889.jpg&amp;h=440&amp;q=90&amp;f=.webp\" alt=\"Vanlife - Host Dashboard\" width=\"506\" height=\"440\" \/><\/a><p class=\"jig-HTMLdescription\">Vanlife - Host Dashboard<\/p><\/li><li><a href=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2023\/09\/vanlife-vans.jpg\"><img decoding=\"async\" src=\"https:\/\/imaginario27.com\/wp-content\/plugins\/justified-image-grid\/timthumb.php?src=https%3A%2F%2Fimaginario27.com%2Fwp-content%2Fuploads%2F2023%2F09%2Fvanlife-vans-752x1024.jpg&amp;h=440&amp;q=90&amp;f=.webp\" alt=\"Vanlife - Van Seite\" width=\"323\" height=\"440\" \/><\/a><p class=\"jig-HTMLdescription\">Vanlife - Van Seite<\/p><\/li><li><a href=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2023\/09\/vanlife-about.jpg\"><img decoding=\"async\" src=\"https:\/\/imaginario27.com\/wp-content\/plugins\/justified-image-grid\/timthumb.php?src=https%3A%2F%2Fimaginario27.com%2Fwp-content%2Fuploads%2F2023%2F09%2Fvanlife-about-774x1024.jpg&amp;h=440&amp;q=90&amp;f=.webp\" alt=\"Vanlife - About Seite\" width=\"332\" height=\"440\" \/><\/a><p class=\"jig-HTMLdescription\">Vanlife - About Seite<\/p><\/li><\/ul><\/noscript><\/div>\n<h2>Funktionen<\/h2>\n<h3>1. Startseite<\/h3>\n<p>Die Startseite bietet eine Einf\u00fchrung in die Vanlife-App und ihren Zweck.<\/p>\n<h3>2. Host-Seite (gesch\u00fctzte Route)<\/h3>\n<p>Die Host-Seite ist eine gesch\u00fctzte Route, die Authentifizierung erfordert. Benutzer m\u00fcssen sich anmelden, um auf diese Seite zugreifen zu k\u00f6nnen. Sie k\u00f6nnen den im Rahmen der App bereitgestellten Fake-Login-Mechanismus verwenden, um diese Funktion zu testen. Auf der Host-Seite gibt es einige Unterseiten wie Dashboard, Einnahmen, Host-Fahrzeuge und Bewertungen.<\/p>\n<h3>3. About-Seite<\/h3>\n<p>Die About-Seite bietet Informationen \u00fcber die Ersteller der App und deren Mission.<\/p>\n<h3>4. Van-Liste-Seite<\/h3>\n<p>Die Van-Liste-Seite zeigt eine Liste verf\u00fcgbarer Vans an. Benutzer k\u00f6nnen auf einen Van klicken, um weitere Details anzuzeigen.<\/p>\n<h3>5. Van-Detailseite<\/h3>\n<p>Die Van-Detailseite bietet ausf\u00fchrliche Informationen zu einem ausgew\u00e4hlten Van.<\/p>\n<h2>Demo<\/h2>\n<p>Besuchen Sie die\u00a0<a href=\"https:\/\/scrimba-vanlife-img27.netlify.app\/\" target=\"_blank\" rel=\"noopener\">App-Seite<\/a>, um zu sehen, wie sie funktioniert.<\/p>\n<h2>Repository<\/h2>\n<p>Erfahren Sie mehr \u00fcber das Projekt auf Github, indem Sie <a href=\"https:\/\/github.com\/Imaginario27\/scrimba-password-generator\" target=\"_blank\" rel=\"noopener\">hier<\/a> klicken.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vanlife ist eine Beispiel-React-Webanwendung, die die Verwendung von React Router und gesch\u00fctzten Routen demonstriert. Dieses Projekt dient als Ausgangspunkt f\u00fcr den Aufbau von Webanwendungen mit Authentifizierungs- und Routing-Funktionen. In dieser App haben wir eine grundlegende Struktur mit mehreren wichtigen Seiten und Funktionen implementiert: Startseite Host-Seite (gesch\u00fctzte Route) + einige gesch\u00fctzte Unterseiten About-Seite Van-Liste-Seite Van-Detailseite Einige [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12390,"comment_status":"open","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"project_category":[115],"project_tag":[287],"class_list":["post-12386","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-front-end-web-development","project_tag-web-applications-de","clientes-imaginario27","formatos-horizontales-format","tecnologias-api-rest-de","tecnologias-css-de","tecnologias-firebase-de","tecnologias-html-de","tecnologias-javascript-de","tecnologias-react-de"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Vanlife - Eine React-Router-App mit gesch\u00fctzten Routen - Imaginario27<\/title>\n<meta name=\"description\" content=\"Vanlife ist eine Beispiel-React-Webanwendung, die die Verwendung von React Router und gesch\u00fctzten Routen demonstriert.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vanlife - Eine React-Router-App mit gesch\u00fctzten Routen - Imaginario27\" \/>\n<meta property=\"og:description\" content=\"Vanlife ist eine Beispiel-React-Webanwendung, die die Verwendung von React Router und gesch\u00fctzten Routen demonstriert.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/\" \/>\n<meta property=\"og:site_name\" content=\"Imaginario27\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-21T15:14:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/imaginario27.com\/wp-content\/uploads\/2023\/09\/vanlife-home.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1118\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/projekte\\\/vanlife-eine-react-router-app-mit-geschuetzten-routen\\\/\",\"url\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/projekte\\\/vanlife-eine-react-router-app-mit-geschuetzten-routen\\\/\",\"name\":\"Vanlife - Eine React-Router-App mit gesch\u00fctzten Routen - Imaginario27\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/projekte\\\/vanlife-eine-react-router-app-mit-geschuetzten-routen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/projekte\\\/vanlife-eine-react-router-app-mit-geschuetzten-routen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/vanlife-home.jpg\",\"datePublished\":\"2023-09-25T17:12:27+00:00\",\"dateModified\":\"2024-04-21T15:14:34+00:00\",\"description\":\"Vanlife ist eine Beispiel-React-Webanwendung, die die Verwendung von React Router und gesch\u00fctzten Routen demonstriert.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/projekte\\\/vanlife-eine-react-router-app-mit-geschuetzten-routen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/imaginario27.com\\\/de\\\/projekte\\\/vanlife-eine-react-router-app-mit-geschuetzten-routen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/projekte\\\/vanlife-eine-react-router-app-mit-geschuetzten-routen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/vanlife-home.jpg\",\"contentUrl\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/vanlife-home.jpg\",\"width\":1600,\"height\":1118,\"caption\":\"Vanlife - Home Page\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/projekte\\\/vanlife-eine-react-router-app-mit-geschuetzten-routen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Projekte\",\"item\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/projekte\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Vanlife &#8211; Eine React-Router-App mit gesch\u00fctzten Routen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/\",\"name\":\"Imaginario27\",\"description\":\"Porfolio de trabajos creativos\",\"publisher\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/#\\\/schema\\\/person\\\/772d8c794bad977a3d9ad0dcc0b9a3d5\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/imaginario27.com\\\/de\\\/#\\\/schema\\\/person\\\/772d8c794bad977a3d9ad0dcc0b9a3d5\",\"name\":\"Imaginario27\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/imaginario27-imagotipo.png\",\"url\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/imaginario27-imagotipo.png\",\"contentUrl\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/imaginario27-imagotipo.png\",\"width\":1000,\"height\":1000,\"caption\":\"Imaginario27\"},\"logo\":{\"@id\":\"https:\\\/\\\/imaginario27.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/imaginario27-imagotipo.png\"},\"sameAs\":[\"https:\\\/\\\/imaginario27.com\\\/\",\"https:\\\/\\\/www.instagram.com\\\/imaginario27\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vanlife - Eine React-Router-App mit gesch\u00fctzten Routen - Imaginario27","description":"Vanlife ist eine Beispiel-React-Webanwendung, die die Verwendung von React Router und gesch\u00fctzten Routen demonstriert.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/","og_locale":"de_DE","og_type":"article","og_title":"Vanlife - Eine React-Router-App mit gesch\u00fctzten Routen - Imaginario27","og_description":"Vanlife ist eine Beispiel-React-Webanwendung, die die Verwendung von React Router und gesch\u00fctzten Routen demonstriert.","og_url":"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/","og_site_name":"Imaginario27","article_modified_time":"2024-04-21T15:14:34+00:00","og_image":[{"width":1600,"height":1118,"url":"https:\/\/imaginario27.com\/wp-content\/uploads\/2023\/09\/vanlife-home.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/","url":"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/","name":"Vanlife - Eine React-Router-App mit gesch\u00fctzten Routen - Imaginario27","isPartOf":{"@id":"https:\/\/imaginario27.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/#primaryimage"},"image":{"@id":"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/#primaryimage"},"thumbnailUrl":"https:\/\/imaginario27.com\/wp-content\/uploads\/2023\/09\/vanlife-home.jpg","datePublished":"2023-09-25T17:12:27+00:00","dateModified":"2024-04-21T15:14:34+00:00","description":"Vanlife ist eine Beispiel-React-Webanwendung, die die Verwendung von React Router und gesch\u00fctzten Routen demonstriert.","breadcrumb":{"@id":"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/#primaryimage","url":"https:\/\/imaginario27.com\/wp-content\/uploads\/2023\/09\/vanlife-home.jpg","contentUrl":"https:\/\/imaginario27.com\/wp-content\/uploads\/2023\/09\/vanlife-home.jpg","width":1600,"height":1118,"caption":"Vanlife - Home Page"},{"@type":"BreadcrumbList","@id":"https:\/\/imaginario27.com\/de\/projekte\/vanlife-eine-react-router-app-mit-geschuetzten-routen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/imaginario27.com\/de\/"},{"@type":"ListItem","position":2,"name":"Projekte","item":"https:\/\/imaginario27.com\/de\/projekte\/"},{"@type":"ListItem","position":3,"name":"Vanlife &#8211; Eine React-Router-App mit gesch\u00fctzten Routen"}]},{"@type":"WebSite","@id":"https:\/\/imaginario27.com\/de\/#website","url":"https:\/\/imaginario27.com\/de\/","name":"Imaginario27","description":"Porfolio de trabajos creativos","publisher":{"@id":"https:\/\/imaginario27.com\/de\/#\/schema\/person\/772d8c794bad977a3d9ad0dcc0b9a3d5"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/imaginario27.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/imaginario27.com\/de\/#\/schema\/person\/772d8c794bad977a3d9ad0dcc0b9a3d5","name":"Imaginario27","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/imaginario27.com\/wp-content\/uploads\/2020\/05\/imaginario27-imagotipo.png","url":"https:\/\/imaginario27.com\/wp-content\/uploads\/2020\/05\/imaginario27-imagotipo.png","contentUrl":"https:\/\/imaginario27.com\/wp-content\/uploads\/2020\/05\/imaginario27-imagotipo.png","width":1000,"height":1000,"caption":"Imaginario27"},"logo":{"@id":"https:\/\/imaginario27.com\/wp-content\/uploads\/2020\/05\/imaginario27-imagotipo.png"},"sameAs":["https:\/\/imaginario27.com\/","https:\/\/www.instagram.com\/imaginario27\/"]}]}},"_links":{"self":[{"href":"https:\/\/imaginario27.com\/de\/wp-json\/wp\/v2\/project\/12386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imaginario27.com\/de\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/imaginario27.com\/de\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/imaginario27.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imaginario27.com\/de\/wp-json\/wp\/v2\/comments?post=12386"}],"version-history":[{"count":0,"href":"https:\/\/imaginario27.com\/de\/wp-json\/wp\/v2\/project\/12386\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imaginario27.com\/de\/wp-json\/wp\/v2\/media\/12390"}],"wp:attachment":[{"href":"https:\/\/imaginario27.com\/de\/wp-json\/wp\/v2\/media?parent=12386"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/imaginario27.com\/de\/wp-json\/wp\/v2\/project_category?post=12386"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/imaginario27.com\/de\/wp-json\/wp\/v2\/project_tag?post=12386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}