路由是构建现代 web 应用程序的一个关键方面。 react router 是一个功能强大的库,允许您在 react 应用程序中处理路由。本指南将向您介绍 react router,涵盖基本设置和使用,以及高级路由技术和路由防护。
react 路由器简介
react router 可以在 react 应用程序中的不同组件之间进行导航,允许您创建具有多个视图的单页面应用程序。
设置 react 路由器
要开始使用 react router,您需要将其安装到您的项目中。您可以使用 npm 或yarn 来完成此操作。
npm install react-router-dom
登录后复制
或
yarn add react-router-dom
登录后复制
路由、交换机、链接和 navlink 组件
react router 提供了几个组件来定义路由和处理导航。
路线组件
route 组件用于在应用程序中定义路由。它指定了路径以及路径匹配时应该渲染的组件。
示例:
import react from 'react';import { browserrouter as router, route } from 'react-router-dom';import home from './home';import about from './about';const app = () => { return ( );};export default app;
登录后复制
本例中,当路径为 / 时会渲染 home 组件,当路径为 /about 时会渲染 about 组件。
开关元件
switch 组件确保一次只渲染一条路线。它渲染与当前 url 匹配的第一个 route。
示例:
import react from 'react';import { browserrouter as router, route, switch } from 'react-router-dom';import home from './home';import about from './about';import notfound from './notfound';const app = () => { return ( );};export default app;
登录后复制
在本例中,如果没有路由匹配,将渲染 notfound 组件。
链接组件
link 组件用于在应用程序中创建导航链接。它的工作原理与锚点 () 标签类似,但可以避免整个页面重新加载。
示例:
import react from 'react';import { browserrouter as router, route, link } from 'react-router-dom';import home from './home';import about from './about';const app = () => { return ( );};export default app;
登录后复制
在此示例中,单击链接将导航到相应的路线,而无需重新加载页面。
导航链接组件
navlink 组件与 link 组件类似,但提供了基于活动路线的附加样式功能。
示例:
import react from 'react';import { browserrouter as router, route, navlink } from 'react-router-dom';import home from './home';import about from './about';const app = () => { return ( );};export default app;
登录后复制
在此示例中,activeclassname 属性用于将活动类应用到与当前路由匹配的链接。
先进的路由技术
嵌套路由
嵌套路由允许您在其他路由中创建路由。这对于创建带有子导航的布局很有用。
示例:
import react from 'react';import { browserrouter as router, route, switch, link, useroutematch } from 'react-router-dom';const topic = ({ match }) =>requested topic id: {match.params.topicid}
;const topics = () => { let { path, url } = useroutematch(); return ();};const app = () => (topics
- components
- props v. state
please select a topic.
);export default app;
- home
- topics
home
登录后复制
在此示例中,主题组件包含嵌套路由,允许主题部分内的子导航系统。
动态路由
动态路由允许您基于动态参数创建路由,例如用户 id 或产品 id。
示例:
import react from 'react';import { browserrouter as router, route, switch, link } from 'react-router-dom';const user = ({ match }) =>user id: {match.params.userid}
;const app = () => ();export default app;
- user 1
- user 2
登录后复制
在此示例中,用户组件使用作为路由参数传递的用户 id 进行渲染。
路由参数
路由参数允许您从 url 捕获值并在组件中使用它们。
示例:
import react from 'react';import { browserrouter as router, route, switch, link } from 'react-router-dom';const product = ({ match }) =>product id: {match.params.productid}
;const app = () => ();export default app;
- product 101
- product 202
登录后复制
在本例中,product组件使用productid路由参数来显示产品id。
路由守卫和重定向
路由防护和重定向可帮助您根据条件(例如用户身份验证)控制对某些路由的访问。
保护路线
为了保护路由,您可以创建一个高阶组件(hoc),在渲染组件之前检查条件(例如,用户身份验证)。
示例:
import react from 'react';import { browserrouter as router, route, redirect } from 'react-router-dom';const isauthenticated = false;const privateroute = ({ component: component, ...rest }) => ( isauthenticated ? : } />);const dashboard = () =>dashboard
;const login = () =>login
;const app = () => ();export default app;
登录后复制
在此示例中,privateroute 组件在渲染 dashboard 组件之前检查用户是否经过身份验证。如果用户未通过身份验证,他们将被重定向到登录组件。
在 react router 中实现重定向
可以使用重定向组件来实现重定向,以编程方式将用户导航到不同的路线。
示例:
import React from 'react';import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';const OldPage = () =>Old Page (will redirect)
;const NewPage = () =>New Page
;const App = () => ( );export default App;
登录后复制
在此示例中,访问 /old-page 将自动将用户重定向到 /new-page。
结论
理解和使用 react router 实现路由对于构建健壮的 react 应用程序至关重要。通过掌握设置路由、使用 link 和 navlink 处理导航的基础知识,以及实现嵌套路由、动态路由、路由参数和路由防护等高级技术,您可以在应用程序中创建无缝且安全的导航体验。随着您不断发展自己的技能,这些概念将成为您使用 react 构建复杂的单页应用程序的能力的基础。
以上就是实习生级别:使用 React Router 进行路由的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2673063.html