Merge pull request #780 from leptos-rs/warn-on-routes-issues

docs: warn if you put something invalid inside `<Routes/>`

examples/router/src/lib.rs

@@ -28,19 +28,7 @@ pub fn RouterExample(cx: Scope) -> impl IntoView {
             </nav>
             <main>
                 <Routes>
-                    <Route
+                    <ContactRoutes/>
-                        path=""
-                        view=move |cx| view! { cx,  <ContactList/> }
-                    >
-                        <Route
-                            path=":id"
-                            view=move |cx| view! { cx,  <Contact/> }
-                        />
-                        <Route
-                            path="/"
-                            view=move |_| view! { cx,  <p>"Select a contact."</p> }
-                        />
-                    </Route>
                     <Route
                         path="about"
                         view=move |cx| view! { cx,  <About/> }
@@ -59,6 +47,27 @@ pub fn RouterExample(cx: Scope) -> impl IntoView {
     }
 }
 
+// You can define other routes in their own component.
+// Use a #[component(transparent)] that returns a <Route/>.
+#[component(transparent)]
+pub fn ContactRoutes(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <Route
+            path=""
+            view=move |cx| view! { cx,  <ContactList/> }
+        >
+            <Route
+                path=":id"
+                view=move |cx| view! { cx,  <Contact/> }
+            />
+            <Route
+                path="/"
+                view=move |_| view! { cx,  <p>"Select a contact."</p> }
+            />
+        </Route>
+    }
+}
+
 #[component]
 pub fn ContactList(cx: Scope) -> impl IntoView {
     log::debug!("rendering <ContactList/>");

router/src/components/routes.rs

@@ -32,9 +32,17 @@ pub fn Routes(
         .as_children()
         .iter()
         .filter_map(|child| {
-            child
+            let def = child
                 .as_transparent()
-                .and_then(|t| t.downcast_ref::<RouteDefinition>())
+                .and_then(|t| t.downcast_ref::<RouteDefinition>());
+            if def.is_none() {
+                warn!(
+                    "[NOTE] The <Routes/> component should include *only* \
+                     <Route/>or <ProtectedRoute/> components, or some \
+                     #[component(transparent)] that returns a RouteDefinition."
+                );
+            }
+            def
         })
         .cloned()
         .collect::<Vec<_>>();