router-kit 0.2.3 → 1.0.0
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 +20 -15
- package/dist/context/RouterProvider.js +5 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -41,6 +41,16 @@ npm install router-kit
|
|
|
41
41
|
|
|
42
42
|
N.B. `react` et `react-dom` sont des peerDependencies ; installez-les dans votre projet si nécessaire.
|
|
43
43
|
|
|
44
|
+
## Important
|
|
45
|
+
|
|
46
|
+
⚠️ Tous les hooks et composants de router-kit doivent être utilisés à l'intérieur du `RouterProvider`. Assurez-vous de wrapper votre application avec le `RouterProvider` au plus haut niveau possible.
|
|
47
|
+
|
|
48
|
+
Si vous utilisez des composants ou hooks en dehors du `RouterProvider`, vous obtiendrez une erreur explicite :
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
RouterKit: Common hooks and components must be used within the RouterProvider returned by createRouter(). Wrap your app with the RouterProvider.
|
|
52
|
+
```
|
|
53
|
+
|
|
44
54
|
## Concepts clés
|
|
45
55
|
|
|
46
56
|
- Route : objet avec `path` (string) et `component` (JSX.Element). Les `children` sont supportés pour construire des arborescences.
|
|
@@ -117,28 +127,23 @@ Exemple :
|
|
|
117
127
|
|
|
118
128
|
```tsx
|
|
119
129
|
import React from "react";
|
|
120
|
-
import { createRouter, RouterProvider
|
|
130
|
+
import { createRouter, RouterProvider } from "router-kit";
|
|
121
131
|
|
|
122
|
-
const Home = <div>Accueil</div>;
|
|
123
|
-
const About = <div>À propos</div>;
|
|
132
|
+
const Home = () => <div>Accueil</div>;
|
|
133
|
+
const About = () => <div>À propos</div>;
|
|
124
134
|
|
|
125
135
|
const routes = createRouter([
|
|
126
|
-
{ path: "/", component: Home },
|
|
127
|
-
{ path: "about", component: About },
|
|
136
|
+
{ path: "/", component: <Home /> },
|
|
137
|
+
{ path: "about", component: <About /> },
|
|
128
138
|
{ path: "/404", component: <div>Not Found</div> },
|
|
129
139
|
]);
|
|
130
140
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<nav>
|
|
135
|
-
<Link to="/">Home</Link>
|
|
136
|
-
<Link to="/about">About</Link>
|
|
137
|
-
</nav>
|
|
138
|
-
<RouterProvider routes={routes} />
|
|
139
|
-
</div>
|
|
140
|
-
);
|
|
141
|
+
// Les composants de navigation doivent être à l'intérieur du RouterProvider
|
|
142
|
+
function App() {
|
|
143
|
+
return <RouterProvider routes={routes} />;
|
|
141
144
|
}
|
|
145
|
+
|
|
146
|
+
export default App;
|
|
142
147
|
```
|
|
143
148
|
|
|
144
149
|
## Routes et 404
|
|
@@ -6,7 +6,7 @@ import RouterContext from "./RouterContext";
|
|
|
6
6
|
const RouterProvider = ({ routes }) => {
|
|
7
7
|
const [path, setPath] = useState(window.location.pathname);
|
|
8
8
|
let fullPathWithParams = "";
|
|
9
|
-
let page404 =
|
|
9
|
+
let page404 = null;
|
|
10
10
|
const pathValidation = (routeFullPath, currentPath) => {
|
|
11
11
|
const routePaths = routeFullPath.split("|");
|
|
12
12
|
for (const routePath of routePaths) {
|
|
@@ -33,8 +33,9 @@ const RouterProvider = ({ routes }) => {
|
|
|
33
33
|
const getComponent = (routesList, currentPath, parentPath = "/") => {
|
|
34
34
|
for (const route of routesList) {
|
|
35
35
|
const is404 = route.path === "404" || route.path === "/404";
|
|
36
|
-
if (is404
|
|
36
|
+
if (is404) {
|
|
37
37
|
page404 = route.component;
|
|
38
|
+
continue;
|
|
38
39
|
}
|
|
39
40
|
const fullPath = join(parentPath, `/${route.path}`);
|
|
40
41
|
if (pathValidation(fullPath, currentPath)) {
|
|
@@ -51,9 +52,9 @@ const RouterProvider = ({ routes }) => {
|
|
|
51
52
|
};
|
|
52
53
|
fullPathWithParams = "";
|
|
53
54
|
const matchedComponent = getComponent(routes, path);
|
|
54
|
-
const component = matchedComponent !== null && matchedComponent !== void 0 ? matchedComponent : page404;
|
|
55
|
+
const component = matchedComponent !== null && matchedComponent !== void 0 ? matchedComponent : (page404 || _jsx(Page404, {}));
|
|
55
56
|
const navigate = (to, options) => {
|
|
56
|
-
if (options
|
|
57
|
+
if (options === null || options === void 0 ? void 0 : options.replace) {
|
|
57
58
|
window.history.replaceState({}, "", to);
|
|
58
59
|
}
|
|
59
60
|
else {
|
package/package.json
CHANGED