routerino 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> A lightweight, SEO-optimized React router for modern web applications
|
|
4
4
|
|
|
5
|
-
Routerino is a
|
|
5
|
+
Routerino is a lightweight, zero-dependency router tailored for React client-side rendered (CSR) websites, perfect for modern web architectures like JAMStack and build tools such as Vite.js. It supports [Prerender](https://github.com/prerender/prerender) tags for SEO-friendly redirects and HTTP status codes, and can automatically generate a sitemap.xml file from your routes. Routerino simplifies client-side routing in React apps while providing essential SEO optimizations out of the box, making it an excellent choice for developers seeking a minimalist router with SEO benefits.
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
@@ -25,6 +25,7 @@ Key capabilities:
|
|
|
25
25
|
- Optimize for Googlebot with pre-rendering support
|
|
26
26
|
|
|
27
27
|
- Enhanced User Experience
|
|
28
|
+
|
|
28
29
|
- Support for sharing and social preview metadata
|
|
29
30
|
- Snappy page transitions with automatic scroll reset, eliminating the jarring experience of landing mid-page when navigating
|
|
30
31
|
|
|
@@ -32,7 +33,7 @@ Routerino is designed to work with modern browsers and has been tested with the
|
|
|
32
33
|
|
|
33
34
|
## Installation
|
|
34
35
|
|
|
35
|
-
|
|
36
|
+
Ensure that you have React and React DOM installed in your project as peer dependencies. To add as a dev dependency:
|
|
36
37
|
|
|
37
38
|
```sh
|
|
38
39
|
npm i routerino -D
|
|
@@ -42,13 +43,47 @@ npm i routerino -D
|
|
|
42
43
|
|
|
43
44
|
If you're starting from scratch and wondering "How do I create a React project with Routerino?", here's a recommended approach:
|
|
44
45
|
|
|
45
|
-
1. First, ensure you have Node.js and npm (Node Package Manager) installed on your system.
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
1. First, ensure you have [Node.js](https://nodejs.org/) and npm (Node Package Manager) installed on your system. If you're just getting started, consider using a Node version manager like [Volta](https://volta.sh/), [fnm](https://github.com/Schniz/fnm), or [asdf](https://asdf-vm.com/) for easy installation and management of Node.js versions.
|
|
47
|
+
|
|
48
|
+
2. We recommend using [Vite](https://vitejs.dev/) for a fast and lean development experience. Vite is a modern build tool that focuses on speed and simplicity. To create a new React project with Vite, run the following command in your terminal:
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
npm create vite@latest my-react-app -- --template react
|
|
53
|
+
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
This command will create a new directory called `my-react-app` with a basic React project structure.
|
|
57
|
+
|
|
58
|
+
3. Navigate to your new project directory:
|
|
59
|
+
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
cd my-react-app
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
4. Install the project dependencies using npm:
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
npm install
|
|
71
|
+
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
This command will read the `package.json` file in your project and install all the necessary dependencies.
|
|
75
|
+
|
|
76
|
+
5. Now, add Routerino to your project as a development dependency:
|
|
77
|
+
|
|
78
|
+
```
|
|
50
79
|
|
|
51
|
-
|
|
80
|
+
npm install routerino --save-dev
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
This command will install the latest version of Routerino and save it to your `package.json` file under the `devDependencies` section.
|
|
85
|
+
|
|
86
|
+
With these steps, you'll have a new React project set up with Vite as the build tool and Routerino installed as a development dependency. You can now start building your application and incorporating Routerino for client-side routing and SEO optimizations.
|
|
52
87
|
|
|
53
88
|
## Usage
|
|
54
89
|
|
|
@@ -113,21 +148,22 @@ Please see the [default props](#default-props) and [usage](#usage) sections for
|
|
|
113
148
|
|
|
114
149
|
All of these are optional, so it's easy to get started with nothing but a bare-bones `<Routerino />` element, to get started with a working sample page. The main props you'll need are `routes` and `title`. See [Route props](#routes-prop) for the route format.
|
|
115
150
|
|
|
116
|
-
| Prop | Type | Description
|
|
117
|
-
| ---------------------------------------------- | --------------- |
|
|
118
|
-
| [title](#title-string) | string | The site title
|
|
119
|
-
| [routes](#routes-array-of-routeconfig-objects) | RouteConfig[] | Array of route configurations
|
|
120
|
-
| [separator](#separator-string) | string | Title separator
|
|
121
|
-
| [notFoundTemplate](#notfoundtemplate-element) | React.ReactNode | 404 page template
|
|
122
|
-
| [notFoundTitle](#notfoundtitle-string) | string | 404 page title
|
|
123
|
-
| [errorTemplate](#errortemplate-element) | React.ReactNode | Error page template
|
|
124
|
-
| [errorTitle](#errortitle-string) | string | Error page title
|
|
125
|
-
| [useTrailingSlash](#usetrailingslash-bool) | boolean | Use trailing slashes in URLs
|
|
126
|
-
| [usePrerenderTags](#useprerendertags-bool) | boolean | Use pre-render meta tags
|
|
127
|
-
| [imageUrl](#imageurl-string) | string | Default image URL for sharing
|
|
128
|
-
| [
|
|
129
|
-
| [
|
|
130
|
-
| [
|
|
151
|
+
| Prop | Type | Description | Default |
|
|
152
|
+
| ---------------------------------------------- | --------------- | --------------------------------- | ----------------------------- |
|
|
153
|
+
| [title](#title-string) | string | The site title | `""` |
|
|
154
|
+
| [routes](#routes-array-of-routeconfig-objects) | RouteConfig[] | Array of route configurations | `[Default Route Object]` |
|
|
155
|
+
| [separator](#separator-string) | string | Title separator | `" \| "` |
|
|
156
|
+
| [notFoundTemplate](#notfoundtemplate-element) | React.ReactNode | 404 page template | `<DefaultNotFoundTemplate />` |
|
|
157
|
+
| [notFoundTitle](#notfoundtitle-string) | string | 404 page title | `"Page not found [404]"` |
|
|
158
|
+
| [errorTemplate](#errortemplate-element) | React.ReactNode | Error page template | `<DefaultErrorTemplate />` |
|
|
159
|
+
| [errorTitle](#errortitle-string) | string | Error page title | `"Page error [500]"` |
|
|
160
|
+
| [useTrailingSlash](#usetrailingslash-bool) | boolean | Use trailing slashes in URLs | `true` |
|
|
161
|
+
| [usePrerenderTags](#useprerendertags-bool) | boolean | Use pre-render meta tags | `true` |
|
|
162
|
+
| [imageUrl](#imageurl-string) | string | Default image URL for sharing | `null` |
|
|
163
|
+
| [touchIconUrl](#touchiconurl-string) | string | Image URL for PWA homescreen icon | `null` |
|
|
164
|
+
| [debug](#debug-boolean) | boolean | Enable debug mode | `false` |
|
|
165
|
+
| [titlePrefix](#titleprefix-string) | string | Deprecated: Title prefix | `""` |
|
|
166
|
+
| [titlePostfix](#titlepostfix-string) | string | Deprecated: Title postfix | `""` |
|
|
131
167
|
|
|
132
168
|
##### `title`: string;
|
|
133
169
|
|
|
@@ -222,7 +258,13 @@ Default: `""` (empty string)
|
|
|
222
258
|
|
|
223
259
|
##### `imageUrl`: string;
|
|
224
260
|
|
|
225
|
-
A string containing the path of the default (site-wide) image to use for sharing previews.
|
|
261
|
+
A string containing the path of the default (site-wide) image to use for sharing previews.
|
|
262
|
+
|
|
263
|
+
Default: `null`
|
|
264
|
+
|
|
265
|
+
##### `touchIconUrl`: string;
|
|
266
|
+
|
|
267
|
+
A string containing the path of the image to use for PWA homescreen icon.
|
|
226
268
|
|
|
227
269
|
Default: `null`
|
|
228
270
|
|