Docs: update readme and usage doc for router

packages/router/README.md

@@ -1,6 +1,55 @@
-# Routing for Dioxus App
+<div align="center">
+  <h1>Dioxus Router</h1>
+</div>
 
-DioxusRouter adds React-Router style routing to your Dioxus apps. Works in browser, SSR, and natively.
+
+<div align="center">
+  <!-- Crates version -->
+  <a href="https://crates.io/crates/dioxus">
+    <img src="https://img.shields.io/crates/v/dioxus.svg?style=flat-square"
+    alt="Crates.io version" />
+  </a>
+  <!-- Downloads -->
+  <a href="https://crates.io/crates/dioxus">
+    <img src="https://img.shields.io/crates/d/dioxus.svg?style=flat-square"
+      alt="Download" />
+  </a>
+  <!-- docs -->
+  <a href="https://docs.rs/dioxus">
+    <img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
+      alt="docs.rs docs" />
+  </a>
+  <!-- CI -->
+  <a href="https://github.com/jkelleyrtp/dioxus/actions">
+    <img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
+      alt="CI status" />
+  </a>
+
+  <!--Awesome -->
+  <a href="https://github.com/dioxuslabs/awesome-dioxus">
+    <img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
+  </a>
+  <!-- Discord -->
+  <a href="https://discord.gg/XgGxMSkvUM">
+    <img src="https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square" alt="Discord Link" />
+  </a>
+</div>
+
+
+
+<div align="center">
+  <h3>
+    <a href="https://dioxuslabs.com"> Website </a>
+    <span> | </span>
+    <a href="https://github.com/DioxusLabs/example-projects"> Examples </a>
+    <span> | </span>
+    <a href="https://dioxuslabs.com/guide"> Guide (0.1.8) </a>
+    <span> | </span>
+    <a href="https://dioxuslabs.com/nightly/guide"> Guide (Master) </a>
+  </h3>
+</div>
+
+Dioxus Router is a first-party Router for all your Dioxus Apps. It provides a React-Router style interface that works anywhere: across the browser, SSR, and natively.
 
 ```rust
 fn app() {
@@ -14,16 +63,10 @@ fn app() {
 }
 ```
 
-Then, in your route, you can choose to parse the Route any way you want through `use_route`.
-```rust
-let id: usize = use_route(&cx).segment("id")?;
 
-let state: CustomState = use_route(&cx).parse()?;
-```
+## Resources
 
-Adding links into your app:
-```rust
-Link { to: "id/{id}" }
-```
-
-Currently, the router is only supported in a web environment, but we plan to add 1st-party support via the context API when new renderers are available.
+- See the mdbook
+- See the one-page brief
+- See the guide on the doc site
+- The crates.io API