用wordpress做网站,铜陵商城网站建设,网站建设技术方案,网站默认网站名react-router 是一个流行的用于 React 应用程序路由的库。它使我们能够轻松定义应用程序的路由#xff0c;并将它们映射到特定的组件#xff0c;这样可以很容易地创建复杂的单页面应用#xff0c;并管理应用程序的不同视图。
react-router 是基于 React 构建的#xff0c;…react-router 是一个流行的用于 React 应用程序路由的库。它使我们能够轻松定义应用程序的路由并将它们映射到特定的组件这样可以很容易地创建复杂的单页面应用并管理应用程序的不同视图。
react-router 是基于 React 构建的因此与其他 React 库和工具集成得很好。它在许多 React 应用程序中广泛使用并被认为是 React 中最佳实践的路由。
一、react-router安装和简介
1. react-router安装
使用 npm 或 yarn 安装 react-router-dom。 npm install --save react-router-dom yarn add react-router-dom 2. react-router-dom 简介
react-router-dom 是 react-router 的一种实现方案主要应用于网页端应用它提供了一些常用的组件进行路由管理。
(1) Router 类组件
BrowserRouterhistory 模式下的路由。HashRouterhash 模式下的路由。
(2) Route 组件
Route 是一个路由配置组件。
(3) Link 组件
Link 类似于 a 标签可以用于路由跳转。
(4) useNavigate Hook
useNavigate 是一个钩子函数可以用于路由跳转。
二、react-router-dom 基本使用
1. 引入 react-router-dom
import {BrowserRouter as Router, Routes, Route} from react-router-dom;
这里的 BrowserRouter as Router 相当于给 BrowserRouter 起了一个别名叫 Router。Routes 组件用于包裹 Route 组件Route 组件的父组件必须是 Routes。
2. 简单使用
使用 BrowserRouter 组件包裹 Routes 组件再用 Routes 组件包裹 Route 组件在 Route 组件中定义路由信息就实现了一个简单的 react-router 场景。
Route 组件有 path 和 element 两个属性path 属性代表路由路径element 属性代表要渲染的组件。
index.js
import ReactDOM from react-dom/client;
import App from ./App;
import {BrowserRouter as Router} from react-router-dom;const root ReactDOM.createRoot(document.getElementById(root));
root.render(RouterApp //Router
);
app.js
import ./App.css;
import { Routes, Route} from react-router-dom;
import Home from ./views/Home;
import About from ./views/About;
import Error from ./views/Error;function App() {return (div classNameAppRoutesRoute path/ element{Home/}/Route path/about element{About/}/Route path* element{Error/}//Routes/div);
}export default App;
在上面的案例中我们定义了一个根路由指向 Home 页面。还定义一个指定路径路由 /about指向 About 页面表示当我们在浏览器地址栏中的页面地址后加上 /about 时会跳转到 About 页面。
又定义了一个通用路由指向 Error 页面path* 表示如果浏览器地址栏中的页面地址不是以上定义的2种路由即其他路由地址时就会跳转到 Error 页面。
注意BrowserRouter 组件最好放在最顶层所有组件之外这样能确保内部组件使用 Link 做路由跳转时不出错。
3. 路由跳转
跳转路由时如果路由路径是 / 开头的是绝对路由否则是相对路由即相对于当前 URL进行改变。
(1) Link 组件
Link 组件只能在 Router 组件的内部使用to 属性代表要跳转的路由地址。
import { Link } from react-router-dom;
Link to/aboutTo About/Link
(2) NavLink 组件
NavLink 组件和 Link 组件的功能是一致的区别在于 NavLink 组件可以判断其 to 属性是否是当前匹配到的路由。 NavLink组件的 style 属性或 className 属性可以接收一个函数函数接收一个含有 isActive 字段的对象为参数可根据该参数调整样式。
import { Link } from react-router-dom;
NavLink to/about style{({ isActive }) ( {color: isActive ? red : black} )}To About/NavLink
(3) useNavigate Hook
使用 useNavigate 钩子函数可以在 js 代码中实现路由跳转。
useNavigate 必须在 Route 的上下文中使用即必须包裹在 Router 标签内。 import { useNavigate } from react-router-dom;
button onClick{() navigate(/about)}To About/button
