搜索引擎 网站模板,小型企业互联网解决方案,WordPress文章白色标签,村级网站建设系统文档地址 http://www.reactrouter.cn/docs/getting-started/tutorial
version
V6.x
一、什么是路由
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中#xff0c;当用户点击链接或者输入URL时#xff0c;服务器会接收到请求并返回相应的…文档地址 http://www.reactrouter.cn/docs/getting-started/tutorial
version
V6.x
一、什么是路由
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中当用户点击链接或者输入URL时服务器会接收到请求并返回相应的HTML页面。而在前端路由中当用户点击链接或者输入URL时浏览器会根据路由规则对URL进行解析并使用JavaScript控制页面的展示。
前端路由通常使用JavaScript库来实现比如React Router、Vue Router等。它们允许开发者定义路由规则并根据这些规则来显示不同的组件或页面。例如当用户点击一个链接时前端路由会将URL解析为一个路由路径然后根据路径匹配相应的组件或页面并显示在页面上而不需要向服务器发起请求。
前端路由可以提高Web应用的性能和用户体验因为它允许应用实现快速的页面切换和动态的内容加载同时减少了服务器的负载。
二、安装
// 注意我们用的是6.x的版本
npm install react-router-dom三、路由模式
1、HashRouter
HashRouter使用URL的哈希部分即#后面的部分来匹配路由它不会向服务器发送请求。例如URL可以是http://example.com/#/about。HashRouter兼容性比较好哪怕浏览器不支持HTML5 History API也可以正常使用。
2、BrowserRouter
BrowserRouter使用HTML5 History API来匹配路由使用 HTML5 的 pushState 和 replaceState API 来实现路由的切换。它可以隐藏URL中的#符号使URL更加友好。例如URL可以是http://example.com/about
3、MemoryRouter
MemoryRouter是一个不依赖于浏览器历史记录的路由器。它将URL存储在内存中而不是浏览器历史记录中适用于测试或在不支持HTML5 History API的环境中使用
4、StaticRouter
StaticRouter是一个用于服务器端渲染的路由器。它将请求的URL作为参数传递给组件并将组件的输出发送回客户端。这样就可以在服务器端生成动态HTML然后将其发送到浏览器。
5、NativeRouter
NativeRouter是用于React Native应用的路由器它使用Native导航而不是HTML导航来匹配路由
接下来我们以HashRouter模式为例进行我们的路由学习
四、react-router-dom 有哪些组件
1、HashRouter组件以及其他路由模式组件
用于创建一个路由容器使得我们可以在浏览器中使用路由。它包裹整个应用程序并提供了一个路由的上下文环境。
2、Route组件
用于将一个路由路径与一个组件进行映射。当浏览器 URL 与 Route 组件所定义的路径匹配时该组件就会被渲染到页面上
常用属性
属性名类型默认值描述pathstring用于匹配 URL 的路径。elementReactNode指定路由匹配成功后要渲染的组件。caseSensitivebooleanfalse指定路径匹配时是否区分大小写。sensitivebooleanfalse指定路径匹配时是否严格匹配大小写和斜杠。locationstring | object指定要匹配的位置。navigatebooleantrue当路由匹配成功后是否进行页面导航。elementPropsobject传递给渲染组件的属性对象。preloadfunction用于预加载组件。caseSensitivebooleanfalse指定路径匹配时是否区分大小写。sensitivebooleanfalse指定路径匹配时是否严格匹配大小写和斜杠。redirectTostring当路由匹配成功后要重定向到的路径。redirectPathstring当路由匹配成功后要重定向到的路径。replacebooleanfalse当页面导航时是否使用 replace 而非 push。caseSensitivebooleanfalse指定路径匹配时是否区分大小写。sensitivebooleanfalse指定路径匹配时是否严格匹配大小写和斜杠。preventDefaultbooleanfalse是否阻止默认的页面导航行为。whenboolean | functrue指定条件是否匹配用于控制是否进行页面导航。classNamestring为路由渲染的元素指定 CSS 类名。styleobject为路由渲染的元素指定样式对象。titlestring页面标题用于在路由变化时更新页面标题。metaany
例子
import { Route, Routes } from react-router-dom;function App() {return (divRoutesRoute exact path/ element{Home} /Route path/about element{About} //Routes/div);
}3、Routes组件
Routes 组件是 React Router v6 中的一个组件它的作用是用于定义应用程序的路由规则。与 React Router v5 中的 组件类似Routes 组件包含多个 子组件用于指定不同的路径和对应的组件。
Routes 组件可以让我们更加灵活地定义路由规则。与 React Router v5 中的 组件只能按顺序匹配第一个符合条件的路由不同Routes 组件可以匹配多个路由并根据 path 属性的优先级选择最匹配的路由。例如如果同时定义了 /users/:id 和 /users/new 两个路由规则当访问 /users/new 时React Router v6 会选择匹配优先级更高的 /users/new 路由而不是直接匹配第一个符合条件的路由
import { Route, Routes } from react-router-dom;function App() {return (RoutesRoute exact path/ element{Home} /Route path/about element{About} //Routes);
}4、Link组件
用于创建一个链接使得用户可以通过点击链接来访问应用程序的不同路由路径。它会生成一个 标签并根据传入的 to 属性生成正确的 href 属性。
import { Link } from react-router-dom;function Home() {return (divulliLink to/aA页面/Link/liliLink to/bB页面/Link/li/ul/div);
}5、NavLink
与 类似也用于创建一个链接但它会在当前路由匹配成功时添加一个指定的类名以便样式上的区分。
import { NavLink } from react-router-dom;/**
当点击链接的时候会自动激活activeClassName属性的className
*/
function Navbar() {return (navulliNavLink to/a activeClassNameactivea页面/NavLink/liliNavLink to/b activeClassNameactiveb页面/NavLink/li/ul/nav);
}6、Redirect
用于重定向用户到另一个路由路径。当用户访问当前路径时会自动跳转到指定的路径。
在使用Redirect组件时您需要在路由配置中使用它而不是在组件中使用它。例如如果您想在用户访问/home时重定向到/dashboard则可以像这样设置路由
import { Route, Routes, Redirect } from react-router-dom;
import Dashboard from ./Dashboard;function App() {return (RoutesRoute path/dashboard element{Dashboard /} /Route path/home element{Redirect to/dashboard /} //Routes);
}7、Prompt
用于在用户离开当前页面之前提示用户。可以用来防止用户在填写表单时误操作导致数据丢失。
五、react-router-dom中常用的hooks
1、useNavigate
用于在组件中进行导航、跳转等操作与 useHistory 功能类似但提供了更丰富的 API例如可以使用命名路由进行跳转。
所谓的命名理由就是Route组件上定义的name属性然后在跳转的时候直接穿name即可。
2、useParams
用于获取 URL 中的参数例如 /users/:id 中的 id
3、useLocation
用于访问当前页面的位置信息包括 URL 中的路径、查询参数、哈希等。
4、useMatch
用于获取当前页面的匹配信息例如路由规则中的路径、参数等与 useRouteMatch 功能类似
5、useOutlet
用于在父组件中呈现子路由组件可以将子路由组件放在特定位置。也就是展示嵌套路由。
import { useOutlet } from react-router-dom;function App() {const outlet useOutlet();return (divh1这是应用程序的头部/h1{/* 在这里渲染子路由组件 */}{outlet}h1这是应用程序的底部/h1/div);
}路由定义嵌套路由
import { BrowserRouter as Router, Routes, Route } from react-router-dom;function App() {return (RouterRoutesRoute path/ element{Home /} /Route path/about element{About /} /Route path/users element{Users /}{/* 子路由 */}Route path/ element{UserList /} /Route path:id element{UserProfile /} //Route/Routes/Router);
}6、useRoutes
根据规则动态渲染路由。
注意
在使用 useRoutes 钩子函数时需要将其作为根组件渲染而不是将其作为子组件嵌套在其他组件中。这是因为 useRoutes 钩子函数需要访问 react-router-dom 的上下文从而能够进行路由匹配和导航操作。
import { useRoutes } from react-router-dom;function App() {const routes useRoutes([{ path: /, element: Home / },{ path: /about, element: About / },{ path: /contact, element: Contact / },{ path: /users/:id, element: User / },]);return div{routes}/div;
}六、基本使用
1、创建a、b、c三个组件文件内容任意
2、创建router-component.jsx文件
/*** 从react-router-dom中 引用HashRouter 是一个组件* 如果需要别的模式那就引入其他模式**/
import React from react;
import { HashRouter, Route, Routes } from react-router-dom;
import APage from ./learn-router/a;
import BPage from ./learn-router/b;
import CPage from ./learn-router/c;export default function RouterComponent() {return (// 首先确定什么模式那么最上层组件就是用这个模式HashRouterRoutesRoute path/ element{APage /} /Route path/b element{BPage /} /Route path/b element{CPage /}/Route/Routes/HashRouter);
}3、在入口文件处引入
import React from react;
import ReactDOM from react-dom/client;
import RouterComponent from ./rotuerComponent;const root ReactDOM.createRoot(document.getElementById(root));root.render(RouterComponent /
);4、在url地址直接输入地址就可以切换不同的页面
http://localhost:3000/
http://localhost:3000/#/b
http://localhost:3000/#/c
