注册网站租空间哪里租,wordpress 设置关键字,wordpress 数据库密码,app外包流程react-router 为了满足开发者更多路由历史存储场景#xff0c;提供了以下几种模式#xff1a; 浏览器原生历史记录 浏览器 hash 内存型 服务端记录
以上实现分别对应于一下 API 实现#xff1a; createBrowserRouter#xff1a;浏览器提供的历史管理。 createHashRou…react-router 为了满足开发者更多路由历史存储场景提供了以下几种模式 浏览器原生历史记录 浏览器 hash 内存型 服务端记录
以上实现分别对应于一下 API 实现 createBrowserRouter浏览器提供的历史管理。 createHashRouter基于 hash 的路由管理#hello但是呢通常 # 又可以作为锚链接。 createMemoryRouter内存型路由路由的管理存储在内存中。 createStaticRouterSSR 服务端的。
1. createBrowserRouter
通过浏览器原生路由进行路由态管理页面跳转通过 pushState、popState 方法实现。
import * as React from react;
import * as ReactDOM from react-dom;
import {createBrowserRouter,RouterProvider} from react-router-dom;import Root, { rootLoader } from ./routes/root;
import Team, { teamLoader } from ./routes/team;const router createBrowserRouter([{path: /,element: Root /,loader: rootLoader,children: [{path: team,element: Team /,loader: teamLoader,},],},
]);ReactDOM.createRoot(document.getElementById(root)).render(RouterProvider router{router} /
);
需要注意的是使用 browserRouter一般都需要使用类似 Nginx 做静态资源代理另外需要注意 404 的情况一般都需要添加 try_files 处理。
location / {try_files $uri /index.html;
}
2. createHashRouter不推荐
请注意这个方法非常不推荐他的用武之地就在于我们没有 Nginx 作为静态资源代理我们可能就无法使用浏览器历史作为我们路由状态的存储这时可以选择 hash router 方案但是注意真的非常不推荐除非是你自己的个人项目。
import * as React from react;
import * as ReactDOM from react-dom;
import {createHashRouter,RouterProvider} from react-router-dom;import Root, { rootLoader } from ./routes/root;
import Team, { teamLoader } from ./routes/team;const router createHashRouter([{path: /,element: Root /,loader: rootLoader,children: [{path: team,element: Team /,loader: teamLoader,},],},
]);ReactDOM.createRoot(document.getElementById(root)).render(RouterProvider router{router} /
);
3. createMemoryRouter
用于创建一个内存型路由路由表与历史记录栈存储在内存中当页面刷新时路由信息丢失。
import * as React from react;
import * as ReactDOM from react-dom;
import {createMemoryRouter,RouterProvider} from react-router-dom;import CalendarEvent from ./routes/calendarEvent;const routes [{path: /events/:id,element: CalendarEvent /,loader: () FAKE_EVENT,},
];const router createMemoryRouter(routes, {initialEntries: [/, /events/123],initialIndex: 1,
});ReactDOM.createRoot(document.getElementById(root)).render(RouterProvider router{router} /
);
其实这种内存型历史记录我们自己通过状态管理都能够轻松实现他这就类似于我们定义了集中状态然后当状态更新时渲染不同页面。而这里只是多了一些关于路由操作方法的实现比如push、pop 等。
4. createStaticRouter
如果我们需要实现服务端渲染那么在服务端的路由处理则需要使用该 API因为我们知道客户端的路由是基于浏览器的 history而服务端是没有浏览器环境的。
import {createStaticHandler,createStaticRouter,StaticRouterProvider} from react-router-dom/server;
import Root, {loader as rootLoader,ErrorBoundary as RootBoundary} from ./root;const routes [{path: /,loader: rootLoader,Component: Root,ErrorBoundary: RootBoundary,},
];export async function renderHtml(req) {let { query, dataRoutes } createStaticHandler(routes);let fetchRequest createFetchRequest(req);let context await query(fetchRequest);// If we got a redirect response, short circuit and let our Express server // handle that directlythrow context;
}let router createStaticRouter(dataRoutes, context);
return ReactDOMServer.renderToString(React.StrictModeStaticRouterProvider router{router} context{context} //React.StrictMode
);
