6 |
8 | );
9 | };
10 |
11 | export default Home;
12 |
--------------------------------------------------------------------------------
/packages/breadcrumbs/node-main.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | if (process.env.NODE_ENV === "production") {
4 | module.exports = require("./umd/antd-breadcrumbs.production.min.js");
5 | } else {
6 | module.exports = require("./umd/antd-breadcrumbs..development.js");
7 | }
8 |
--------------------------------------------------------------------------------
/packages/keep-alive/node-main.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | if (process.env.NODE_ENV === "production") {
4 | module.exports = require("./umd/antd-breadcrumbs.production.min.js");
5 | } else {
6 | module.exports = require("./umd/antd-breadcrumbs..development.js");
7 | }
8 |
--------------------------------------------------------------------------------
/packages/antd-breadcrumbs/node-main.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | if (process.env.NODE_ENV === "production") {
4 | module.exports = require("./umd/antd-breadcrumbs.production.min.js");
5 | } else {
6 | module.exports = require("./umd/antd-breadcrumbs..development.js");
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react-router-manage/node-main.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | if (process.env.NODE_ENV === "production") {
4 | module.exports = require("./umd/react-router-manage.production.min.js");
5 | } else {
6 | module.exports = require("./umd/react-router-manage.development.js");
7 | }
8 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | demo/
2 | test/
3 | examples/
4 | coverage/
5 | .commitlintrc.js
6 | .eslintignore
7 | .eslintrc.js
8 | .gitattributes
9 | .gitignore
10 | .gitlab-ci.yml
11 | .huskyrc.js
12 | .npmignore
13 | babel.config.js
14 | CHANGELOG.md
15 | postcss.config.js
16 | tsconfig.json
17 | jest.config.js
--------------------------------------------------------------------------------
/dist/assets/index-2e05da30.css:
--------------------------------------------------------------------------------
1 | body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}
2 |
--------------------------------------------------------------------------------
/docs/assets/js/5e3106fb.fdb697ed.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | (self.webpackChunkdocs = self.webpackChunkdocs || []).push([
3 | [3805],
4 | {
5 | 4469: s => {
6 | s.exports = JSON.parse(
7 | '{"name":"docusaurus-plugin-content-blog","id":"default"}'
8 | );
9 | }
10 | }
11 | ]);
12 |
--------------------------------------------------------------------------------
/docs/assets/js/80b002d6.c136f31e.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | (self.webpackChunkdocs = self.webpackChunkdocs || []).push([
3 | [6105],
4 | {
5 | 3769: s => {
6 | s.exports = JSON.parse(
7 | '{"name":"docusaurus-plugin-content-docs","id":"default"}'
8 | );
9 | }
10 | }
11 | ]);
12 |
--------------------------------------------------------------------------------
/docs/assets/js/ec408539.56917c2d.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | (self.webpackChunkdocs = self.webpackChunkdocs || []).push([
3 | [3451],
4 | {
5 | 5745: s => {
6 | s.exports = JSON.parse(
7 | '{"name":"docusaurus-plugin-content-pages","id":"default"}'
8 | );
9 | }
10 | }
11 | ]);
12 |
--------------------------------------------------------------------------------
/examples/lazy-loading/src/pages/Messages.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | export default function Messages() {
3 | return (
4 | Home
7 |
5 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/examples/auth/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 |
4 | import "./index.css";
5 | import App from "./App";
6 |
7 | ReactDOM.createRoot(document.getElementById("root")!).render(
8 | Messages
6 |-
7 |
- Message 1 8 |
- Message 2 9 |
Email
;
10 | };
11 |
12 | export default Email;
13 |
--------------------------------------------------------------------------------
/website/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | /node_modules
3 |
4 | # Production
5 | /build
6 |
7 | # Generated files
8 | .docusaurus
9 | .cache-loader
10 |
11 | # Misc
12 | .DS_Store
13 | .env.local
14 | .env.development.local
15 | .env.test.local
16 | .env.production.local
17 |
18 | npm-debug.log*
19 | yarn-debug.log*
20 | yarn-error.log*
21 |
--------------------------------------------------------------------------------
/examples/antd-breadcrumbs/src/pages/my-page/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface MyPageProps {
4 | id?: number;
5 | }
6 |
7 | const modulePrefix = "MyPage";
8 | const MyPage: React.FCMyPage
;
10 | };
11 |
12 | export default MyPage;
13 |
--------------------------------------------------------------------------------
/examples/antd-breadcrumbs/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "antd/dist/reset.css";
4 |
5 | import "./index.css";
6 | import App from "./App";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")!).render(
9 | Contact
;
10 | };
11 |
12 | export default Contact;
13 |
--------------------------------------------------------------------------------
/examples/antd-breadcrumbs/src/pages/project/clients/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface ClientProps {
4 | id?: number;
5 | }
6 |
7 | const modulePrefix = "Client";
8 | const Client: React.FCClient
;
10 | };
11 |
12 | export default Client;
13 |
--------------------------------------------------------------------------------
/examples/antd-breadcrumbs/src/pages/project/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface ProjectProps {
4 | id?: number;
5 | }
6 |
7 | const modulePrefix = "Project";
8 | const Project: React.FCProject
;
10 | };
11 |
12 | export default Project;
13 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @type {import('prettier').Options}
3 | */
4 | module.exports = {
5 | arrowParens: "avoid",
6 | trailingComma: "none",
7 | overrides: [
8 | {
9 | files: "**/*.md",
10 | options: {
11 | printWidth: 1000,
12 | proseWrap: "never",
13 | tabWidth: 2
14 | }
15 | }
16 | ]
17 | };
18 |
--------------------------------------------------------------------------------
/examples/antd-breadcrumbs/src/pages/contact/grid-view/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface GridViewProps {
4 | id?: number;
5 | }
6 |
7 | const modulePrefix = "GridView";
8 | const GridView: React.FCGridView
;
10 | };
11 |
12 | export default GridView;
13 |
--------------------------------------------------------------------------------
/examples/antd-breadcrumbs/src/pages/contact/list-view/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface ListViewProps {
4 | id?: number;
5 | }
6 |
7 | const modulePrefix = "ListView";
8 | const ListView: React.FCListView
;
10 | };
11 |
12 | export default ListView;
13 |
--------------------------------------------------------------------------------
/examples/antd-breadcrumbs/src/pages/messenger/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface MessengerProps {
4 | id?: number;
5 | }
6 |
7 | const modulePrefix = "Messenger";
8 | const Messenger: React.FCMessenger
;
10 | };
11 |
12 | export default Messenger;
13 |
--------------------------------------------------------------------------------
/examples/antd-breadcrumbs/src/pages/project/todo-list/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface ToDoListProps {
4 | id?: number;
5 | }
6 |
7 | const modulePrefix = "ToDoList";
8 | const ToDoList: React.FCToDoList
;
10 | };
11 |
12 | export default ToDoList;
13 |
--------------------------------------------------------------------------------
/docs/assets/js/1897ff02.dc84d8c2.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | (self.webpackChunkdocs = self.webpackChunkdocs || []).push([
3 | [1519],
4 | {
5 | 1334: e => {
6 | e.exports = JSON.parse(
7 | '{"label":"hello","permalink":"/react-router-manage/blog/tags/hello","allTagsPath":"/react-router-manage/blog/tags","count":2}'
8 | );
9 | }
10 | }
11 | ]);
12 |
--------------------------------------------------------------------------------
/docs/assets/js/f7521111.584dd3bd.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | (self.webpackChunkdocs = self.webpackChunkdocs || []).push([
3 | [9633],
4 | {
5 | 9661: a => {
6 | a.exports = JSON.parse(
7 | '{"label":"hola","permalink":"/react-router-manage/blog/tags/hola","allTagsPath":"/react-router-manage/blog/tags","count":1}'
8 | );
9 | }
10 | }
11 | ]);
12 |
--------------------------------------------------------------------------------
/docs/assets/js/b0f97ac5.c072f860.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | (self.webpackChunkdocs = self.webpackChunkdocs || []).push([
3 | [4961],
4 | {
5 | 3733: a => {
6 | a.exports = JSON.parse(
7 | '{"label":"facebook","permalink":"/react-router-manage/blog/tags/facebook","allTagsPath":"/react-router-manage/blog/tags","count":1}'
8 | );
9 | }
10 | }
11 | ]);
12 |
--------------------------------------------------------------------------------
/examples/actions/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StrictMode } from "react";
3 | import { createRoot } from "react-dom/client";
4 |
5 | import App from "./App";
6 |
7 | const rootElement = document.getElementById("root");
8 | const root = createRoot(rootElement!);
9 |
10 | root.render(
11 | TaskBoard
;
10 | };
11 |
12 | export default TaskBoard;
13 |
--------------------------------------------------------------------------------
/docs/assets/js/11dd5695.ab75d6b0.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | (self.webpackChunkdocs = self.webpackChunkdocs || []).push([
3 | [7306],
4 | {
5 | 4914: a => {
6 | a.exports = JSON.parse(
7 | '{"label":"docusaurus","permalink":"/react-router-manage/blog/tags/docusaurus","allTagsPath":"/react-router-manage/blog/tags","count":4}'
8 | );
9 | }
10 | }
11 | ]);
12 |
--------------------------------------------------------------------------------
/docs/assets/js/6c88cea6.4a33a54b.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | (self.webpackChunkdocs = self.webpackChunkdocs || []).push([
3 | [3360],
4 | {
5 | 9118: e => {
6 | e.exports = JSON.parse(
7 | '{"permalink":"/react-router-manage/blog","page":1,"postsPerPage":10,"totalPages":1,"totalCount":4,"blogDescription":"Blog","blogTitle":"Blog"}'
8 | );
9 | }
10 | }
11 | ]);
12 |
--------------------------------------------------------------------------------
/examples/actions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | TicketList
;
10 | };
11 |
12 | export default TicketList;
13 |
--------------------------------------------------------------------------------
/examples/auth/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | ProjectList
;
10 | };
11 |
12 | export default ProjectList;
13 |
--------------------------------------------------------------------------------
/examples/beforeEnter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | current dashboard id is {params.id}
;
11 | };
12 |
13 | export default Detail;
14 |
--------------------------------------------------------------------------------
/examples/custom-query-parsing/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
17 |
18 |
19 | 20 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/examples/custom-link/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Custom Active Link
3 | toc: false
4 | ---
5 |
6 | # Custom Link Example
7 |
8 | This example demonstrates how to make a custom `` component to render something different when the link is "active" using the `useMatch()` and `useResolvedPath()` hooks.
9 |
10 | ## Preview
11 |
12 | Open this example on [StackBlitz](https://stackblitz.com):
13 |
14 | [](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/custom-link?file=src/App.tsx)
15 |
--------------------------------------------------------------------------------
/docs/assets/js/814f3328.98156c54.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | (self.webpackChunkdocs = self.webpackChunkdocs || []).push([
3 | [2535],
4 | {
5 | 5641: e => {
6 | e.exports = JSON.parse(
7 | '{"title":"Recent posts","items":[{"title":"Welcome","permalink":"/react-router-manage/blog/welcome"},{"title":"MDX Blog Post","permalink":"/react-router-manage/blog/mdx-blog-post"},{"title":"Long Blog Post","permalink":"/react-router-manage/blog/long-blog-post"},{"title":"First Blog Post","permalink":"/react-router-manage/blog/first-blog-post"}]}'
8 | );
9 | }
10 | }
11 | ]);
12 |
--------------------------------------------------------------------------------
/entry/antd-breadcrumbs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 19 | 20 |
12 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/react-router-manage/src/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import BrowserRouter from "./core/BrowserRouter";
3 | import HashRouter from "./core/HashRouter";
4 | import {
5 | useAddRoutes,
6 | useRemoveRoutes,
7 | useUpdateRoutes
8 | } from "./context/MRouterContext";
9 | import { useHistory } from "./context/MRouterHistoryContext";
10 |
11 | import CoreRouter, { MRouterPropsI } from "./core/CoreRouter";
12 |
13 | export type {
14 | RouterConfigI,
15 | RouteTypeI,
16 | RouteTypeExtendsI,
17 | RoutesMapI
18 | } from "./type";
19 |
20 | export { defineRouterConfig } from "./util";
21 | export { useBeforeLeave, useNavigate, useRouter } from "./hooks";
22 |
23 | const MRouter: React.FCexamples
13 |-
14 |
- basic 15 |
- antd-breadcrumbs 16 |
- auth 17 |
- beforeEnter 18 |
- beforeEachMount 19 |
- children 20 |
- custom-filter-link 21 |
- custom-link 22 |
- custom-query-parsing 23 |
- lazy-loading 24 |
- permission 25 | 26 |
14 |
39 | );
40 | };
41 |
42 | export default Dashboard;
43 |
--------------------------------------------------------------------------------
/website/src/css/custom.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Any CSS included here will be global. The classic template
3 | * bundles Infima by default. Infima is a CSS framework designed to
4 | * work well for content-centric websites.
5 | */
6 |
7 | /* You can override the default Infima variables here. */
8 | :root {
9 | --ifm-color-primary: #2e8555;
10 | --ifm-color-primary-dark: #29784c;
11 | --ifm-color-primary-darker: #277148;
12 | --ifm-color-primary-darkest: #205d3b;
13 | --ifm-color-primary-light: #33925d;
14 | --ifm-color-primary-lighter: #359962;
15 | --ifm-color-primary-lightest: #3cad6e;
16 | --ifm-code-font-size: 95%;
17 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
18 | }
19 |
20 | /* For readability concerns, you should choose a lighter palette in dark mode. */
21 | [data-theme="dark"] {
22 | --ifm-color-primary: #25c2a0;
23 | --ifm-color-primary-dark: #21af90;
24 | --ifm-color-primary-darker: #1fa588;
25 | --ifm-color-primary-darkest: #1a8870;
26 | --ifm-color-primary-light: #29d5b0;
27 | --ifm-color-primary-lighter: #32d8b4;
28 | --ifm-color-primary-lightest: #4fddbf;
29 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
30 | }
31 |
--------------------------------------------------------------------------------
/website/docs/tutorial-basics/congratulations.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 6
3 | ---
4 |
5 | # Congratulations!
6 |
7 | You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
8 |
9 | Docusaurus has **much more to offer**!
10 |
11 | Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
12 |
13 | Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
14 |
15 | ## What's next?
16 |
17 | - Read the [official documentation](https://docusaurus.io/)
18 | - Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
19 | - Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
20 | - Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
21 | - Add a [search bar](https://docusaurus.io/docs/search)
22 | - Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
23 | - Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
24 |
--------------------------------------------------------------------------------
/test/changeable.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "@testing-library/jest-dom";
3 | import { render, screen } from "@testing-library/react";
4 | import {
5 | MRouter,
6 | defineRouterConfig,
7 | useRouter
8 | } from "../packages/react-router-manage/index";
9 | import { routes, Page } from "./routeConfig";
10 |
11 | const WrapComponent = ({ children }) => {
12 | const { currentRoute } = useRouter();
13 | return (
14 | -
15 |
- 16 | 25 | 26 |
- 27 | 36 | 37 |
15 |
18 | );
19 | };
20 |
21 | const appRouterConfig = defineRouterConfig({
22 | basename: "/",
23 | routes: routes,
24 | LoadingComponent: () => {currentRoute.path}
16 | {children}
17 | current component is loading
25 | });
26 |
27 | describe("changeable tests", () => {
28 | it("配置了beforeEnter组件显示加载中", () => {
29 | history.pushState({}, "", "/a/page2/noJump");
30 | render(
31 | My React page
25 |This is a React page
26 |
28 | 
29 |
40 | );
41 | };
42 |
43 | NoAuth.displayName = "NoAuth";
44 |
45 | export default NoAuth;
46 |
--------------------------------------------------------------------------------
/examples/beforeEachMount/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 |
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true
22 | }
23 | }
24 | },
25 | resolve: process.env.USE_SOURCE
26 | ? {
27 | alias: {
28 | "react-router-manage": path.join(
29 | __dirname,
30 | "../../packages/react-router-manage"
31 | ),
32 | history: path.join(__dirname, "./node_modules/history"),
33 | "react-router": path.join(__dirname, "./node_modules/react-router"),
34 | "react-router-dom": path.join(
35 | __dirname,
36 | "./node_modules/react-router-dom"
37 | ),
38 | "query-string": path.join(__dirname, "./node_modules/query-string")
39 | }
40 | }
41 | : {}
42 | });
43 |
--------------------------------------------------------------------------------
/examples/custom-link/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 |
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true
22 | }
23 | }
24 | },
25 | resolve: process.env.USE_SOURCE
26 | ? {
27 | alias: {
28 | "react-router-manage": path.join(
29 | __dirname,
30 | "../../packages/react-router-manage"
31 | ),
32 | history: path.join(__dirname, "./node_modules/history"),
33 | "react-router": path.join(__dirname, "./node_modules/react-router"),
34 | "react-router-dom": path.join(
35 | __dirname,
36 | "./node_modules/react-router-dom"
37 | ),
38 | "query-string": path.join(__dirname, "./node_modules/query-string")
39 | }
40 | }
41 | : {}
42 | });
43 |
--------------------------------------------------------------------------------
/examples/lazy-loading/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 |
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true
22 | }
23 | }
24 | },
25 | resolve: process.env.USE_SOURCE
26 | ? {
27 | alias: {
28 | "react-router-manage": path.join(
29 | __dirname,
30 | "../../packages/react-router-manage"
31 | ),
32 | history: path.join(__dirname, "./node_modules/history"),
33 | "react-router": path.join(__dirname, "./node_modules/react-router"),
34 | "react-router-dom": path.join(
35 | __dirname,
36 | "./node_modules/react-router-dom"
37 | ),
38 | "query-string": path.join(__dirname, "./node_modules/query-string")
39 | }
40 | }
41 | : {}
42 | });
43 |
--------------------------------------------------------------------------------
/examples/custom-filter-link/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 |
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true
22 | }
23 | }
24 | },
25 | resolve: process.env.USE_SOURCE
26 | ? {
27 | alias: {
28 | "react-router-manage": path.join(
29 | __dirname,
30 | "../../packages/react-router-manage"
31 | ),
32 | history: path.join(__dirname, "./node_modules/history"),
33 | "react-router": path.join(__dirname, "./node_modules/react-router"),
34 | "react-router-dom": path.join(
35 | __dirname,
36 | "./node_modules/react-router-dom"
37 | ),
38 | "query-string": path.join(__dirname, "./node_modules/query-string")
39 | }
40 | }
41 | : {}
42 | });
43 |
--------------------------------------------------------------------------------
/examples/custom-query-parsing/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 |
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true
22 | }
23 | }
24 | },
25 | resolve: process.env.USE_SOURCE
26 | ? {
27 | alias: {
28 | "react-router-manage": path.join(
29 | __dirname,
30 | "../../packages/react-router-manage"
31 | ),
32 | history: path.join(__dirname, "./node_modules/history"),
33 | "react-router": path.join(__dirname, "./node_modules/react-router"),
34 | "react-router-dom": path.join(
35 | __dirname,
36 | "./node_modules/react-router-dom"
37 | ),
38 | "query-string": path.join(__dirname, "./node_modules/query-string")
39 | }
40 | }
41 | : {}
42 | });
43 |
--------------------------------------------------------------------------------
/website/docs/tutorial-basics/create-a-document.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 2
3 | ---
4 |
5 | # Create a Document
6 |
7 | Documents are **groups of pages** connected through:
8 |
9 | - a **sidebar**
10 | - **previous/next navigation**
11 | - **versioning**
12 |
13 | ## Create your first Doc
14 |
15 | Create a Markdown file at `docs/hello.md`:
16 |
17 | ```md title="docs/hello.md"
18 | # Hello
19 |
20 | This is my **first Docusaurus document**!
21 | ```
22 |
23 | A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
24 |
25 | ## Configure the Sidebar
26 |
27 | Docusaurus automatically **creates a sidebar** from the `docs` folder.
28 |
29 | Add metadata to customize the sidebar label and position:
30 |
31 | ```md title="docs/hello.md" {1-4}
32 | ---
33 | sidebar_label: "Hi!"
34 | sidebar_position: 3
35 | ---
36 |
37 | # Hello
38 |
39 | This is my **first Docusaurus document**!
40 | ```
41 |
42 | It is also possible to create your sidebar explicitly in `sidebars.js`:
43 |
44 | ```js title="sidebars.js"
45 | export default {
46 | tutorialSidebar: [
47 | "intro",
48 | // highlight-next-line
49 | "hello",
50 | {
51 | type: "category",
52 | label: "Tutorial",
53 | items: ["tutorial-basics/create-a-document"]
54 | }
55 | ]
56 | };
57 | ```
58 |
--------------------------------------------------------------------------------
/examples/lazy-loading/src/pages/Dashboard.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Routes, Route, Outlet, Link } from "react-router-dom";
3 |
4 | export default function Dashboard() {
5 | // These routes are defined when this component is loaded on demand via
6 | // dynamic import() on the home page!
7 | return (
8 |
37 | {config.title}
38 |
39 |
20 |
30 |
31 |
32 | 33 |
35 | );
36 | }
37 |
38 | function DashboardIndex() {
39 | return (
40 | 32 | 33 |
41 |
43 | );
44 | }
45 |
46 | function Messages() {
47 | return (
48 | Dashboard Index
42 |
49 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "website",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "docusaurus": "docusaurus",
7 | "start": "docusaurus start",
8 | "build": "docusaurus build",
9 | "swizzle": "docusaurus swizzle",
10 | "deploy": "docusaurus deploy",
11 | "clear": "docusaurus clear",
12 | "serve": "docusaurus serve",
13 | "write-translations": "docusaurus write-translations",
14 | "write-heading-ids": "docusaurus write-heading-ids",
15 | "typecheck": "tsc"
16 | },
17 | "dependencies": {
18 | "@docusaurus/core": "3.1.0",
19 | "@docusaurus/preset-classic": "3.1.0",
20 | "@mdx-js/react": "^3.0.0",
21 | "clsx": "^2.0.0",
22 | "prism-react-renderer": "^2.3.0",
23 | "react": "^18.0.0",
24 | "react-dom": "^18.0.0"
25 | },
26 | "devDependencies": {
27 | "@docusaurus/module-type-aliases": "3.1.0",
28 | "@docusaurus/tsconfig": "3.1.0",
29 | "@docusaurus/types": "3.1.0",
30 | "typescript": "~5.2.2"
31 | },
32 | "browserslist": {
33 | "production": [
34 | ">0.5%",
35 | "not dead",
36 | "not op_mini all"
37 | ],
38 | "development": [
39 | "last 3 chrome version",
40 | "last 3 firefox version",
41 | "last 5 safari version"
42 | ]
43 | },
44 | "engines": {
45 | "node": ">=18.0"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/packages/react-router-manage/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-router-manage",
3 | "version": "2.0.5",
4 | "author": "wenxinping@corp.netease.com",
5 | "description": "react-router-manage extends react-router(v6), it Including authentication, configuration, addition, deletion and modification",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/NSFI/react-router-manage.git",
9 | "directory": "packages/react-router-manage"
10 | },
11 | "license": "MIT",
12 | "main": "./dist/main.js",
13 | "unpkg": "./dist/umd/react-router-dom.production.min.js",
14 | "module": "./dist/index.js",
15 | "types": "./dist/index.d.ts",
16 | "peerDependencies": {
17 | "react": ">=16.8",
18 | "react-dom": ">=16.8"
19 | },
20 | "dependencies": {
21 | "query-string": "^7.1.1",
22 | "react-router": "6.9.0",
23 | "react-router-dom": "6.9.0",
24 | "@remix-run/router": "1.4.0"
25 | },
26 | "devDependencies": {
27 | "@types/query-string": "^6.3.0"
28 | },
29 | "files": [
30 | "dist/",
31 | "README.md"
32 | ],
33 | "sideEffects": false,
34 | "keywords": [
35 | "react",
36 | "router",
37 | "react-router",
38 | "router-manage",
39 | "router-pro",
40 | "route",
41 | "routing",
42 | "history",
43 | "guard",
44 | "react router guard",
45 | "路由管理"
46 | ]
47 | }
48 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 | build: {
18 | rollupOptions: {
19 | input: {
20 | main: path.resolve(__dirname, "index.html"),
21 | breadcrumbs: path.resolve(
22 | __dirname,
23 | "entry/antd-breadcrumbs/index.html"
24 | ),
25 | basic: path.resolve(__dirname, "entry/basic/index.html")
26 | }
27 | }
28 | },
29 | css: {
30 | preprocessorOptions: {
31 | less: {
32 | javascriptEnabled: true
33 | }
34 | }
35 | },
36 | resolve: process.env.USE_SOURCE
37 | ? {
38 | alias: {
39 | "react-router-manage": path.join(
40 | __dirname,
41 | "./packages/react-router-manage"
42 | ),
43 | "@rrmc/antd-breadcrumbs": path.join(
44 | __dirname,
45 | "./packages/antd-breadcrumbs"
46 | )
47 | }
48 | }
49 | : {}
50 | });
51 |
--------------------------------------------------------------------------------
/examples/actions/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 |
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true
22 | }
23 | }
24 | },
25 | resolve: process.env.USE_SOURCE
26 | ? {
27 | alias: {
28 | "react-router-manage": path.join(
29 | __dirname,
30 | "../../packages/react-router-manage/index.tsx"
31 | ),
32 | "@remix-run/router": path.resolve(
33 | __dirname,
34 | "./node_modules/@remix-run/router"
35 | ),
36 | history: path.join(__dirname, "./node_modules/history"),
37 | "react-router": path.join(__dirname, "./node_modules/react-router"),
38 | "react-router-dom": path.join(
39 | __dirname,
40 | "./node_modules/react-router-dom"
41 | ),
42 | "query-string": path.join(__dirname, "./node_modules/query-string")
43 | }
44 | }
45 | : {}
46 | });
47 |
--------------------------------------------------------------------------------
/examples/basic/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 |
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true
22 | }
23 | }
24 | },
25 | resolve: process.env.USE_SOURCE
26 | ? {
27 | alias: {
28 | "react-router-manage": path.join(
29 | __dirname,
30 | "../../packages/react-router-manage/index.tsx"
31 | ),
32 | "@remix-run/router": path.resolve(
33 | __dirname,
34 | "./node_modules/@remix-run/router"
35 | ),
36 | history: path.join(__dirname, "./node_modules/history"),
37 | "react-router": path.join(__dirname, "./node_modules/react-router"),
38 | "react-router-dom": path.join(
39 | __dirname,
40 | "./node_modules/react-router-dom"
41 | ),
42 | "query-string": path.join(__dirname, "./node_modules/query-string")
43 | }
44 | }
45 | : {}
46 | });
47 |
--------------------------------------------------------------------------------
/examples/beforeEnter/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 |
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true
22 | }
23 | }
24 | },
25 | resolve: process.env.USE_SOURCE
26 | ? {
27 | alias: {
28 | "react-router-manage": path.join(
29 | __dirname,
30 | "../../packages/react-router-manage/index.tsx"
31 | ),
32 | "@remix-run/router": path.resolve(
33 | __dirname,
34 | "./node_modules/@remix-run/router"
35 | ),
36 | history: path.join(__dirname, "./node_modules/history"),
37 | "react-router": path.join(__dirname, "./node_modules/react-router"),
38 | "react-router-dom": path.join(
39 | __dirname,
40 | "./node_modules/react-router-dom"
41 | ),
42 | "query-string": path.join(__dirname, "./node_modules/query-string")
43 | }
44 | }
45 | : {}
46 | });
47 |
--------------------------------------------------------------------------------
/examples/children/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 |
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true
22 | }
23 | }
24 | },
25 | resolve: process.env.USE_SOURCE
26 | ? {
27 | alias: {
28 | "react-router-manage": path.join(
29 | __dirname,
30 | "../../packages/react-router-manage/index.tsx"
31 | ),
32 | "@remix-run/router": path.resolve(
33 | __dirname,
34 | "./node_modules/@remix-run/router"
35 | ),
36 | history: path.join(__dirname, "./node_modules/history"),
37 | "react-router": path.join(__dirname, "./node_modules/react-router"),
38 | "react-router-dom": path.join(
39 | __dirname,
40 | "./node_modules/react-router-dom"
41 | ),
42 | "query-string": path.join(__dirname, "./node_modules/query-string")
43 | }
44 | }
45 | : {}
46 | });
47 |
--------------------------------------------------------------------------------
/examples/permission/vite.config.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { defineConfig } from "vite";
3 | import react from "@vitejs/plugin-react";
4 | import rollupReplace from "@rollup/plugin-replace";
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | rollupReplace({
9 | preventAssignment: true,
10 | values: {
11 | __DEV__: JSON.stringify(true),
12 | "process.env.NODE_ENV": JSON.stringify("development")
13 | }
14 | }),
15 | react()
16 | ],
17 |
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true
22 | }
23 | }
24 | },
25 | resolve: process.env.USE_SOURCE
26 | ? {
27 | alias: {
28 | "react-router-manage": path.join(
29 | __dirname,
30 | "../../packages/react-router-manage/index.tsx"
31 | ),
32 | "@remix-run/router": path.resolve(
33 | __dirname,
34 | "./node_modules/@remix-run/router"
35 | ),
36 | history: path.join(__dirname, "./node_modules/history"),
37 | "react-router": path.join(__dirname, "./node_modules/react-router"),
38 | "react-router-dom": path.join(
39 | __dirname,
40 | "./node_modules/react-router-dom"
41 | ),
42 | "query-string": path.join(__dirname, "./node_modules/query-string")
43 | }
44 | }
45 | : {}
46 | });
47 |
--------------------------------------------------------------------------------
/website/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import Link from "@docusaurus/Link";
3 | import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
4 | import Layout from "@theme/Layout";
5 | import HomepageFeatures from "@site/src/components/HomepageFeatures";
6 | import Heading from "@theme/Heading";
7 |
8 | import styles from "./index.module.css";
9 |
10 | function HomepageHeader() {
11 | const { siteConfig } = useDocusaurusContext();
12 | return (
13 | Messages
50 |-
51 |
- Message 1 52 |
- Message 2 53 |
15 |
16 | {siteConfig.title}
17 |
18 |
28 | {siteConfig.tagline}
19 |
20 |
24 | Docusaurus Tutorial - 5min ⏱️
25 |
26 |
27 |
47 |
49 |
50 | {children}
51 |
59 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | * For a detailed explanation regarding each configuration property, visit:
3 | * https://jestjs.io/docs/en/configuration.html
4 | */
5 |
6 | module.exports = {
7 | collectCoverageFrom: [
8 | 'packages/**/src/**/*.{js,jsx,ts,tsx}',
9 | '!packages/**/*.d.ts',
10 | '!packages/**/dist/**/*',
11 | ],
12 | moduleFileExtensions: [
13 | 'js', 'jsx', 'json', 'ts', 'tsx', 'md'
14 | ],
15 | // 测试之前的准备
16 | setupFiles: [
17 | // 'react-app-ployfill/jsdom',
18 | ],
19 | testMatch: [
20 | 'Antd router breadcrumbs2
60 |docs directory.
29 |
30 | )
31 | },
32 | {
33 | title: "Powered by React",
34 | Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
35 | description: (
36 | <>
37 | Extend or customize your website layout by reusing React. Docusaurus can
38 | be extended while reusing the same header and footer.
39 |
40 | )
41 | }
42 | ];
43 |
44 | function Feature({ title, Svg, description }: FeatureItem) {
45 | return (
46 |
47 |
55 | );
56 | }
57 |
58 | export default function HomepageFeatures(): JSX.Element {
59 | return (
60 |
48 |
49 |
50 |
51 | {title}
52 |
54 | {description}
53 |
62 |
68 |
63 | {FeatureList.map((props, idx) => (
64 |
67 |
49 | {children => children}
59 |
60 | );
61 | }
62 |
63 | function CustomLink({ children, to, ...props }: LinkProps) {
64 | let resolved = useResolvedPath(to);
65 | let match = useMatch({ path: resolved.pathname, end: true });
66 | return (
67 | Custom Link Example
50 | 51 |
52 | This example demonstrates how to create a custom{" "}
53 | <Link> component that knows whether or not it is
54 | "active" using the low-level useResolvedPath() and
55 | useMatch() hooks.
56 |
68 |
73 | {children}
74 |
75 | {match && " (active)"}
76 |
77 | );
78 | }
79 |
80 | function Layout() {
81 | return (
82 |
83 |
93 |
94 |
95 | 96 |
98 | );
99 | }
100 |
101 | function Home() {
102 | return (
103 | 95 | 96 |
104 |
106 | );
107 | }
108 |
109 | function About() {
110 | return (
111 | Home
105 |
112 |
114 | );
115 | }
116 |
117 | function NoMatch() {
118 | return (
119 | About
113 |
120 |
125 | );
126 | }
127 |
--------------------------------------------------------------------------------
/packages/react-router-manage/src/core/CoreRouter.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useCallback, useMemo, useRef } from "react";
3 | import type { Location } from "react-router-dom";
4 | import BrowserRouter from "./BrowserRouter";
5 | import HashRouter from "./HashRouter";
6 | import MRouterContextProvider from "./MRouterContextProvider";
7 | import { PermissionModeType, RouterBaseConfigI } from "../type";
8 |
9 | export interface MRouterPropsI {
10 | permissionList?: string[];
11 | permissionMode?: PermissionModeType;
12 | wrapComponent?: React.FunctionComponentNothing to see here!
121 |122 | Go to the home page 123 |
124 |
13 | {/* A "layout route" is a good place to put markup you want to
14 | share across all the pages on your site, like navigation. */}
15 |
31 |
32 |
33 | 34 | {children} 35 |
36 | );
37 | }
38 |
39 | function Home() {
40 | return (
41 | 33 | 34 | {children} 35 |
42 |
44 | );
45 | }
46 |
47 | function About() {
48 | return (
49 | Home
43 |
50 |
52 | );
53 | }
54 |
55 | function Dashboard() {
56 | return (
57 | About
51 |
58 |
60 | );
61 | }
62 |
63 | function NoMatch() {
64 | return (
65 | Dashboard
59 |
66 |
71 | );
72 | }
73 | const Router = window.__INITIAL_DATA__.mode === "hash" ? MHRouter : MRouter;
74 |
75 | const routerConfig = defineRouterConfig({
76 | basename:
77 | window.__INITIAL_DATA__.mode !== "hash"
78 | ? window.__INITIAL_DATA__.basename
79 | : "/",
80 | routes: [
81 | {
82 | path: "/",
83 | name: "layout",
84 | // component: Layout,
85 | items: [
86 | {
87 | path: "home",
88 | name: "home",
89 | component: React.lazy(() => import("./Home")),
90 | beforeEnter(to, next) {
91 | console.log("beforeEnter", to, next);
92 | // next();
93 | }
94 | },
95 | {
96 | path: "dashboard",
97 | name: "dashboard",
98 | component: Dashboard
99 | },
100 | {
101 | path: "about",
102 | name: "about",
103 | component: About
104 | },
105 | {
106 | path: "*",
107 | name: "all",
108 | component: NoMatch
109 | }
110 | ]
111 | }
112 | ]
113 | });
114 |
115 | export default function App() {
116 | return (
117 | Nothing to see here!
67 |68 | Go to the home page 69 |
70 |
118 | below. */}
123 |
124 |
126 | );
127 | }
128 |
--------------------------------------------------------------------------------
/packages/react-router-manage/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # react-router-manage
2 |
3 | ## 2.0.5
4 |
5 | ### Patch Changes
6 |
7 | - 62c1693: fix tag error
8 | - 064b691: Fixed the issue of props transparent transmission failure caused by configuring beforeEnter
9 |
10 | ## 2.0.5-beta.1
11 |
12 | ### Patch Changes
13 |
14 | - fix tag error
15 |
16 | ## 2.0.5-beta.0
17 |
18 | ### Patch Changes
19 |
20 | - Fixed the issue of props transparent transmission failure caused by configuring beforeEnter
21 |
22 | ## 2.0.4
23 |
24 | ### Patch Changes
25 |
26 | - Add external call jumps, such as initializing micro frontend applications outside ofbeforeEnter Example
119 | 120 | {/* Routes nest inside one another. Nested route paths build upon 121 | parent route paths, and nested route elements render inside 122 | parent route elements. See the note about
6 |
7 | 
8 |
9 |
10 | 
11 |
12 |
13 | 
14 |
15 |
16 | 
17 |
18 |
19 |
22 | English | 简体中文 23 |
24 | 25 | ## Features 26 | 27 | `react-router-manage` is based on `react-router` `v6`. It can realize the function of authentication, guard, add, delete and check of route by configuration. Because `react-router` `v5` upgrades to `v6` have a high cost, `react-router-manage` provides the API from the original `v5` section for compatible projects that use `v5` for smooth upgrades to `v6` 28 | 29 | - 🛠 [**[`config router`](https://github.com/NSFI/react-router-manage/blob/main/README.md#routerConfig)**] - Centralized router configuration, fast and convenient management. 30 | - ＋ [**[`addRoutes`](https://github.com/NSFI/react-router-manage/blob/main/README.md#useAddRoutes)**] - Dynamically add `routes`: you can use hook `useAddRoutes` to add routes and automatically refresh the view. 31 | - ➖ [**[`removeRoutes`](https://github.com/NSFI/react-router-manage/blob/main/README.md#useRemoveRoutes)**] - Dynamically delete routes: you can use hook `useRemoveRoutes` to delete routes and automatically refresh the view. 32 | - 🖇 [**[`updateRoutes`](https://github.com/NSFI/react-router-manage/blob/main/README.md#useUpdateRoutes)**] - Dynamically modify routes: you can use hook `useUpdateRoutes` to modify routes. 33 | - 🔐 [**permission**] - Permission control: configure the code of the route and automatically manage the permission of the route 34 | - 👨✈️ [**route guard**] - Provide hooks for route entry config `beforeEnter` and **[`beforeEachMount`](https://github.com/NSFI/react-router-manage/blob/main/README.md#beforeEachMount)**, route exit hook **[`useBeforeLeave`](https://github.com/NSFI/react-router-manage/blob/main/README.md#useBeforeLeave)** 35 | - 🌲 [**navigation**] - level navigation: supports level navigation, and automatically generates navigation bars for parent-child routes, such as breadcrumbs and menu navigation 36 | 37 | ## About 38 | 39 | `react-router-manage` is used in many projects within [Netease BizEase](https://growthease.com/). In order to give back to the community, it has decided to open source, and is willing to build a useful react router management library with friends in the community 40 | -------------------------------------------------------------------------------- /website/blog/2019-05-29-long-blog-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: long-blog-post 3 | title: Long Blog Post 4 | authors: endi 5 | tags: [hello, docusaurus] 6 | --- 7 | 8 | This is the summary of a very long blog post, 9 | 10 | Use a `` comment to limit blog post size in the list view. 11 | 12 | 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 15 | 16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 17 | 18 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 21 | 22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 23 | 24 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 25 | 26 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 27 | 28 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 29 | 30 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 31 | 32 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 33 | 34 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 35 | 36 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 37 | 38 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 39 | 40 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 41 | 42 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 43 | 44 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 45 | -------------------------------------------------------------------------------- /packages/antd-breadcrumbs/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { useParams, useRouter } from "react-router-manage"; 3 | import type { RouteTypeExtendsI } from "react-router-manage"; 4 | import { Breadcrumb } from "antd"; 5 | 6 | interface AntdRouterBreadcrumbsProps { 7 | text?: React.ReactNode; // 面包屑文案，例如新增xx还是编辑xx可以自定义 8 | separator?: string; // 分隔符 9 | } 10 | 11 | const AntdRouterBreadcrumbs: React.FC
13 | {/* A "layout route" is a good place to put markup you want to
14 | share across all the pages on your site, like navigation. */}
15 |
31 |
32 |
33 | 34 | {children} 35 |
36 | );
37 | }
38 |
39 | function Home() {
40 | return (
41 | 33 | 34 | {children} 35 |
42 |
44 | );
45 | }
46 |
47 | function About() {
48 | return (
49 | Home
43 |
50 |
52 | );
53 | }
54 |
55 | function Dashboard(props) {
56 | console.log(props);
57 | return (
58 | About
51 |
59 |
62 | );
63 | }
64 |
65 | function NoMatch() {
66 | return (
67 | Dashboard
60 |{props.age}
61 |
68 |
73 | );
74 | }
75 | const Router = window.__INITIAL_DATA__.mode === "hash" ? MHRouter : MRouter;
76 |
77 | const routerConfig = defineRouterConfig({
78 | basename:
79 | window.__INITIAL_DATA__.mode !== "hash"
80 | ? window.__INITIAL_DATA__.basename
81 | : "/",
82 | routes: [
83 | {
84 | path: "/",
85 | name: "layout",
86 | // component: Layout,
87 | items: [
88 | {
89 | path: "home",
90 | name: "home",
91 | component: React.lazy(() => import("./Home")),
92 | beforeEnter(to, next) {
93 | // alert("beforeEnter");
94 | // debugger;
95 | next();
96 | },
97 | props: {
98 | name: "home"
99 | }
100 | },
101 | {
102 | path: "dashboard",
103 | name: "dashboard",
104 | component: Dashboard,
105 | props: {
106 | name: "dashboard",
107 | age: 18
108 | }
109 | },
110 | {
111 | path: "about",
112 | name: "about",
113 | component: About,
114 | props: {
115 | name: "about"
116 | }
117 | },
118 | {
119 | path: "*",
120 | name: "all",
121 | component: NoMatch
122 | }
123 | ]
124 | }
125 | ]
126 | });
127 |
128 | export default function App() {
129 | return (
130 | Nothing to see here!
69 |70 | Go to the home page 71 |
72 |
131 | below. */}
136 |
137 |
139 | );
140 | }
141 |
--------------------------------------------------------------------------------