2018企业网站转化率,腾讯企点是什么,徐州建设局官网,国内做网站公司排名我们书接上回#xff0c;继续我们的React Router 路由之路#xff1a; 我们到目前为止都没有用到 state、useEffect、redux等状态管理器。但也达到了我们的设计目的。 注意#xff0c;action 返回的结果 可以在组件中使用 useActionData() 来获取。就像 useLoaderData() 的使…我们书接上回继续我们的React Router 路由之路 我们到目前为止都没有用到 state、useEffect、redux等状态管理器。但也达到了我们的设计目的。 注意action 返回的结果 可以在组件中使用 useActionData() 来获取。就像 useLoaderData() 的使用一样。 loader 中的 URL参数
接着上回的示例文件 新建几个无名联系人。虽然联系人信息没有变化但我们仔细查看地址栏会发现 ID 是会发生变化的。因为我们在createContact()中为每个联系人分配了一个ID号。
我们再次查看路由信息
...
{path: contacts/:contactId,element: Contact /,
},...在上节中我们已经详细的说过通过 :contactId 路由变量我们可以获取到这个符在地址中的 id 号的。我们再次对 utils.jsx 进行修改注意里面的备注信息很重要。
import { getContacts, createContact, getContact } from ./contacts;// 模拟网络请求获取数据
export async function rootLoader() {const contacts await getContacts();return { contacts };
}//创建新的联系人
export async function rootAction() {const contact await createContact();return { contact };
}// 根据 URL 中的ID 获取对应的联系人信息。变量 params 是一个对象包含了 URL 中的参数。
// 其中 contactId 就是路由变量中的 :contactId即 /contacts/:contactId。同名变量。
export async function contactLoader({ params }) {const contact await getContact(params.contactId);return { contact };
}为了不造成理解上的概念混淆我们把原先的action 更名为 rootAction, 新增了 contactLoader函数你应该理解过来了这个loader是用有 组件的路由配置中的。 然后在 routerConfig.jsx中进行修改。
import { createBrowserRouter } from react-router-dom;import Root from ./Root;
import Error404 from ./Error404;
import Contact from ./Contact;
import {rootLoader,rootAction,contactLoader,
} from ./utils;const router createBrowserRouter([{path: /,element: Root /,errorElement: Error404 /,loader: rootLoader,action: rootAction,children: [{path: contacts/:contactId,element: Contact /,loader: contactLoader},]}
]);export default router;现在组件Contact/ 加载后就能获取到相应的 contact 信息了我们只要在组件内用 useLoaderData() 就能获取到。对Contact.jsx进行修改:
// Contact.jsximport {Form,useLoaderData,
} from react-router-dom;
import Favorite from ./Favorite;export default function Contact() {const { contact } useLoaderData();// const contact {// first: Your,// last: Name,// avatar: https://placekitten.com/g/200/200,// twitter: your_handle,// notes: Some notes,// favorite: true,// };...}将之前表态定义的联系人信息删掉用 上面的替换。 上面我已经注释了。
更新联系人信息
就像创建数据一样您可以使用 更新数据。创建 EditContact.jsx 文件。
// Edit.jsximport { Form, useLoaderData } from react-router-dom;export default function EditContact() {const { contact } useLoaderData();return (Form methodpost idcontact-formpspanName/spaninputplaceholderFirstaria-labelFirst nametypetextnamefirstdefaultValue{contact.first}/inputplaceholderLastaria-labelLast nametypetextnamelastdefaultValue{contact.last}//plabelspanTwitter/spaninputtypetextnametwitterplaceholderjackdefaultValue{contact.twitter}//labellabelspanAvatar URL/spaninputplaceholderhttps://reactrouter.com/_docs/tutorial/12.webparia-labelAvatar URLtypetextnameavatardefaultValue{contact.avatar}//labellabelspanNotes/spantextareanamenotesdefaultValue{contact.notes}rows{6}//labelpbutton typesubmitSave/buttonbutton typebuttonCancel/button/p/Form);
}增加路由信息将编辑组件添加到路由中
// routerConfig.jsximport { createBrowserRouter } from react-router-dom;import Root from ./Root;
import Error404 from ./Error404;
import Contact from ./Contact;
import EditContact from ./EditContact;
import {rootLoader,rootAction,contactLoader,
} from ./utils;const router createBrowserRouter([{path: /,element: Root /,errorElement: Error404 /,loader: rootLoader,action: rootAction,children: [{path: contacts/:contactId,element: Contact /,loader: contactLoader},{path: contacts/:contactId/edit,element: EditContact /,loader: contactLoader,},]}
]);export default router;配置在子路由中的目的就是在 Root 中的 Outlet/的位置中显示的。 注意路由的配置当我们点击 Edit 按钮后注意查看 URL 的变化如http://localhost:5173/contacts/uiahrwo/edit, 一眼就能看出可以匹配 ath: contacts/:contactId/edit的配置信息。 现在在界面应该如下所示
现在我人需要将编辑的信息反映到 action 中来更新信息。在 utils.jsx 中创建 editAction(), 并配置到路由中。文件中的参数我已经作了详细的说明。
// utils.jsximport { redirect } from react-router-dom;
import { getContacts, createContact, getContact, updateContact } from ./contacts;...// 更新联系人信息
// request 是一个对象包含了请求的所有信息包括请求头、请求体等。
// params 是一个对象包含了 URL 中的参数即路由变量。
// 通过 request.formData() 可以获取到表单数据返回一个 FormData 对象。
// FormData 对象是一个键值对集合每个键对应一个值值可以是字符串也可以是 Blob 对象。
// 通过 Object.fromEntries() 可以将 FormData 对象转换为一个普通的对象。
// 通过 updateContact() 更新联系人信息。
// redirect() 可以重定向到指定的 URL。
export async function editAction({ request, params }) {const formData await request.formData();const updates Object.fromEntries(formData);await updateContact(params.contactId, updates);return redirect(/contacts/${params.contactId});
}更新路由配置信息:
// routerConfig.jsximport { createBrowserRouter } from react-router-dom;import Root from ./Root;
import Error404 from ./Error404;
import Contact from ./Contact;
import EditContact from ./EditContact;
import {rootLoader,rootAction,contactLoader,editAction,
} from ./utils;const router createBrowserRouter([{path: /,element: Root /,errorElement: Error404 /,loader: rootLoader,action: rootAction,children: [{path: contacts/:contactId,element: Contact /,loader: contactLoader},{path: contacts/:contactId/edit,element: EditContact /,loader: contactLoader,action: editAction},]}
]);export default router;增加活动链接状态
现在我们有一堆记录不清楚我们在侧边栏中查看的是哪一条。我们可以使用 NavLink 来解决这个问题。 将 Root 中的 Link 替换为 NavLink 如下所示
import {Outlet,Link,useLoaderData,Form,NavLink,
} from react-router-dom;export default function Root() {const { contacts } useLoaderData();return (div idsidebarh1React Router Contacts/h1divform idsearch-form rolesearchinputidqaria-labelSearch contactsplaceholderSearchtypesearchnameq/dividsearch-spinneraria-hiddenhidden{true}/divclassNamesr-onlyaria-livepolite/div/formForm methodpostbutton typesubmitNew/button/Form/divnav{contacts.length ? (ul{contacts.map((contact) (li key{contact.id}NavLinkto{contacts/${contact.id}}className{({ isActive, isPending }) isActive? active: isPending? pending: }{contact.first || contact.last ? ({contact.first} {contact.last}/) : (iNo Name/i)}{ }{contact.favorite span★/span}/NavLink/li))}/ul) : (piNo contacts/i/p)}/nav/divdiv iddetail Outlet / /div/);
}
请注意我们将一个函数传递给 className 。当用户位于 NavLink 中的 URL 时isActive 将为 true 。当它即将处于活动状态数据仍在加载时isPending将为 true 。这使我们能够轻松指示用户的位置并就已点击但仍在等待数据加载的链接提供即时反馈。
有时候我们希望数据在加载的时候有个状态反馈如下图所示
路由的加载状态可以通过 useNavigation 来获取。我们再次对 Root.jsx 进修修改
import {// 其它代码// ... ...useNavigation,
} from react-router-dom;// ...export default function Root() {const { contacts } useLoaderData();const navigation useNavigation();return (div idsidebar{/* ... */}/divdividdetailclassName{navigation.state loading ? loading : }Outlet //div/);
}由于我们在本地缓存了数据所以加载速度很快看不到这个效果但如果是从网络上执行耗时的操作时这种效果就很明显了。
删除联系人
现在我们再来完善我们的应用当我们点击删除按钮后我们要把 联系人的 ID 传递给路由再由相应的action去完成删除工作。
查看 Contact.jsx 文件
FormmethodpostactiondestroyonSubmit{(event) {if (!confirm(Please confirm you want to delete this record.)) {event.preventDefault();}}}
button typesubmitDelete/button
/Form仔细查看Form中的参数 action 提交到 destroy 路由这个路由地址是相对地址。由于Contact 的路由是 contacts/:contactId, 所以这个destroy的路径为 contacts/:contactId/destroy, 我们先创建这个路由的action函数 deleteAction(),
// utils.jsximport { redirect } from react-router-dom;
import {getContacts,createContact,getContact,updateContact,deleteContact
} from ./contacts;...// 删除联系人
export async function destroyAction({ params }) {await deleteContact(params.contactId);return redirect(/);
}并将它配置到路由中 ... import { action as destroyAction } from ./routes/destroy;const router createBrowserRouter([{path: /,...children: [...{path: contacts/:contactId/destroy,action: destroyAction,},],},
]);...
由于我们没有在子路由中配置 errorElement 这是因为我们在destroyAction中直接重定向到 / , 所以这个element就没有创建的必要了。事实上也的确没有这个需求 // routerConfig.jsx[...{path: contacts/:contactId/destroy,action: destroyAction,errorElement: divOops! There was an error./div,},
]; 还有一点非常重要Form 的 提交方法为 post 时才能激活路由中的action操作。 索引路由
每当我们加载这个App时你会发现右侧是一个空页面。就像下面这样
当一条路由有子路由时而当前页面又处在父路由层级时Outlet没有任何子路由与之匹配所以就没有可渲染的界面。这个时候可以将索引路由视为填充该空间的默认子路由。 创建 Index 组件如下所示
// Index.jsxexport default function Index() {return (p idzero-stateThis is a demo for React Router.br /Check out{ }a hrefhttps://reactrouter.comthe docs at reactrouter.com/a./p);
}配置这个Index到路由
// routerConfig.jsx...import Index from ./Index;...const router createBrowserRouter([{path: /,element: Root /,errorElement: Error404 /,loader: rootLoader,action: rootAction,children: [{ index: true, element: Index / },...]}
]);export default router;这个时候我们进入App重新渲染后界面如下
完美。 现在还有最后一个功能没有完成就是搜索功能我们希望根据输入的关键词来搜索出联系人。
URL的搜索参数与Get提交
传统的html表单中如果没有指定提交方法的话默认为get方式提交到服务器如我们Root.jsx中搜索框部分这自然不是我们想要的结果我们只是想把输入参数反应到地址栏中而不影响浏览器的变化正好Form 可以做到。我们把Root中的 html 元素 form 改成 React Router 中的 Form组件就好了就像下面这样
// Root.jsx
...
Form idsearch-form rolesearchinputidqaria-labelSearch contactsplaceholderSearchtypesearchnameq/dividsearch-spinneraria-hiddenhidden{true}/divclassNamesr-onlyaria-livepolite/div
/Form
...现在你的搜索栏中输入些内容回车后你会发现浏览器的地址栏信息也会发会变化但浏览器并没有网络请求操作。这正是我们目的 现在我们修改 rootLoader()函数 以获取get参数并根据这个参数做出筛选联系人的反应
// utils.jsx...// 模拟网络请求获取数据
export async function rootLoader({request}) {const url new URL(request.url);const q url.searchParams.get(q);const contacts await getContacts(q);return { contacts };
}
...现在就很美了。 再次强调因为这是一个 get 的而不是 postReact Router 路由器不调用 action 。提交 GET 表格与单击链接相同只有URL更改。这就是为什么我们添加的过滤代码在loader中而不是在 action 中。 这也意味着这是一个普通的页面导航。您可以单击“后退”按钮以返回到自己的位置。
最后
关于路由的主要应用技术我已经讲完了根据这些应用方法配置 React的状态管理会使我们的应用更加灵活设计更加方便。只要多练习多思考就一定能开发出非常完美的产品。
