intentx-react-router 0.1.25 → 0.2.1
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 +4 -68
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ navigateIntent("edit-user", 42)
|
|
|
39
39
|
# Installation
|
|
40
40
|
|
|
41
41
|
```bash
|
|
42
|
-
npm install intentx-react-router
|
|
42
|
+
npm install intentx-react-router react-router@^7 react-router-dom@^7
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
## Recommended Versions
|
|
@@ -48,7 +48,6 @@ npm install intentx-react-router eventbus-z react-router@^7 react-router-dom@^7
|
|
|
48
48
|
- react-dom: >=18
|
|
49
49
|
- react-router: >=7
|
|
50
50
|
- react-router-dom: >=7
|
|
51
|
-
- eventbus-z: ^2.4.0
|
|
52
51
|
|
|
53
52
|
---
|
|
54
53
|
|
|
@@ -81,51 +80,14 @@ export function RouterBinder() {
|
|
|
81
80
|
return null
|
|
82
81
|
}
|
|
83
82
|
```
|
|
84
|
-
|
|
85
|
-
---
|
|
86
|
-
|
|
87
|
-
## 3. IntentLink
|
|
88
|
-
|
|
89
|
-
```ts
|
|
90
|
-
import React from "react"
|
|
91
|
-
import { Link } from "react-router-dom"
|
|
92
|
-
import { generatePathFromIntent } from "intentx-react-router"
|
|
93
|
-
|
|
94
|
-
export function IntentLink({ intent, params, query, children }) {
|
|
95
|
-
let path = generatePathFromIntent(intent, params)
|
|
96
|
-
if (query) {
|
|
97
|
-
const qs = new URLSearchParams(query).toString()
|
|
98
|
-
if (qs) path += "?" + qs
|
|
99
|
-
}
|
|
100
|
-
return <Link to={path}>{children}</Link>
|
|
101
|
-
}
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
---
|
|
105
|
-
|
|
106
|
-
## 4. IntentRoute
|
|
107
|
-
|
|
108
|
-
---
|
|
109
|
-
|
|
110
|
-
```ts
|
|
111
|
-
import React from "react"
|
|
112
|
-
import { Route } from "react-router-dom"
|
|
113
|
-
import { generatePathFromIntent } from "intentx-react-router"
|
|
114
|
-
|
|
115
|
-
export function IntentRoute({ intent, component: Component }) {
|
|
116
|
-
const path = generatePathFromIntent(intent)
|
|
117
|
-
return <Route path={path} render={(props) => <Component {...props} />} />
|
|
118
|
-
}
|
|
119
|
-
```
|
|
120
|
-
|
|
121
83
|
---
|
|
122
84
|
|
|
123
|
-
##
|
|
85
|
+
## 3. Use in App
|
|
124
86
|
|
|
125
87
|
```ts
|
|
126
88
|
import React from "react"
|
|
127
|
-
import { BrowserRouter, Switch } from "react-router-dom"
|
|
128
|
-
import { RouterBinder
|
|
89
|
+
import { BrowserRouter, Switch, IntentLink, IntentRoute } from "react-router-dom"
|
|
90
|
+
import { RouterBinder } from "./router"
|
|
129
91
|
|
|
130
92
|
import { UserPage } from "./pages/UserPage"
|
|
131
93
|
import { EditUserPage } from "./pages/EditUserPage"
|
|
@@ -154,32 +116,6 @@ export default function App() {
|
|
|
154
116
|
|
|
155
117
|
---
|
|
156
118
|
|
|
157
|
-
## 6. useIntent Hook
|
|
158
|
-
|
|
159
|
-
```ts
|
|
160
|
-
import { useLocation } from "react-router-dom"
|
|
161
|
-
import { resolveIntentFromUrl } from "intentx-react-router"
|
|
162
|
-
|
|
163
|
-
export function useIntent() {
|
|
164
|
-
const location = useLocation()
|
|
165
|
-
const resolved = resolveIntentFromUrl(location.pathname)
|
|
166
|
-
|
|
167
|
-
const searchParams = new URLSearchParams(location.search)
|
|
168
|
-
const query = {}
|
|
169
|
-
searchParams.forEach((value, key) => {
|
|
170
|
-
query[key] = value
|
|
171
|
-
})
|
|
172
|
-
|
|
173
|
-
return {
|
|
174
|
-
intent: resolved?.intent ?? null,
|
|
175
|
-
params: resolved?.params ?? {},
|
|
176
|
-
query
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
```
|
|
180
|
-
|
|
181
|
-
---
|
|
182
|
-
|
|
183
119
|
# Navigation
|
|
184
120
|
|
|
185
121
|
## Object params
|