react路由基础到进阶版来了
1.React 路由介绍
React路由是一种用于构建单页应用程序的工具集，允许创建跨页面或组件之间导航的交互式用户体验。你可以使用路由来动态加载组件，将状态传递给其他组件或动态更改URL。
2. React Router路由的基本概念
React Router是一个基于React的第三方路由库，在构建单页应用程序（SPA）时非常有用。它提供了一个声明式的方式来管理应用程序的URL，并使得页面之间的导航非常容易。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。
路由的作用：
前端路由的功能：让用户从一个视图(页面)导航到另一个视图(页面)
前端路由是一套映射规则，在React中，是URL路径与组件的对应关系
使用React路由简单来说，就是配置路径和组件(配对)
下面是
React Router的一些基本概念：
2.1 路由组件
- BrowserRouter
BrowserRouter和HashRouter是React Router库中两个最常用的组件。
BrowserRouter使用HTML5的history API来允许用户在应用程序中访问不同的页面 - HashRouter
HashRouter则使用URL的#号来实现类似的效果。如果你需要支持老版本的浏览器，建议使用HashRouter。 - Link
Link组件是React Router库中另一个非常常用的组件。它用于在用户之间导航时生成锚点链接，可以将URL路径传递给路由器，并防止页面重新加载。
2.2 路由方法
React Router是一个灵活的路由库，提供了多种方法来操作路由，其中包括一些常用属性，如useParamsuseLocationuseHistoryuseSearchParamsuseNavigateuseRouter。
- useRouter
useRouter是React Router库中的一个自定义hook，可以用来在函数组件中获取路由器和导航对象。使用useRouter可以方便地在组件中进行路由相关操作，例如在处理表单提交时手动导航、在代码中动态生成路由路径等等。
在以下代码中，我们首先使用useRouter()钩子函数获取路由器和导航对象router，然后在表单的submit事件中调用router.navigate()函数，实现手动导航。这种方式比直接编写a标签链接更加方便和灵活。
import React from 'react';
import { useRouter } from 'react-router-dom';
function MyComponent() {
const router = useRouter();
const handleSubmit = (event) => {
// 处理表单提交逻辑
router.navigate('/dashboard');
}
return (
<form onSubmit={handleSubmit}>
{/* 渲染表单 */}
<button type="submit">提交</button>
</form>
);
}
export default MyComponent;
- useParams
useParams是React Hooks中React Router提供的路由参数获取方法。该方法可以获取路由中传递的动态参数和查询参数，并将其封装在一个对象中返回。
在下面的例子中，我们通过useParams获取了路由参数postId，并在组件中呈现它
import React from "react";
import { useParams } from "react-router-dom";
export default function Post() {
const { postId } = useParams();
return (
<div>
<h2>Post ID: {postId}</h2>
</div>
);
}
- useLocation
useLocation是React Router提供的另一个属性，用于获取当前URL的位置信息。
路由默认参数location的属性包含：路径名称pathname，状态hash，查询参数search，状态state。
在这个例子中，我们使用useLocation获取了当前URL路径，并把它呈现在组件中。
import React from "react";
import { useLocation } from "react-router-dom";
export default function MyComponent() {
const location = useLocation();
return (
<div>
<h2>Current URL: {location.pathname}</h2>
</div>
);
}
- useHistory
useHistory用于获得history对象，通过其方法可实现路由的跳转、返回等操作。
示例代码
import React from 'react';
import { useHistory } from 'react-router-dom';
function Login() {
const history = useHistory();
function handleClick() {
// 跳转到首页
history.push('/');
}
return (
<button onClick={handleClick}>登录</button>
);
}
export default Login;
- useSearchParams
useSearchParams用于获取当前路由的查询参数。它可以在函数组件中调用，用于从URL查询参数中获取数据。通过这个函数，我们可以在React组件内获取URL中的查询参数，从而方便地实现各种基于查询参数的页面逻辑。
在下面的代码中，我们首先通过useLocation()钩子函数获取当前路由的location对象，然后使用URLSearchParams构造函数创建一个查询参数对象，然后调用get()方法获取查询参数的值，并将其存储在query变量中。
import React from 'react';
import { useLocation } from 'react-router-dom';
function SearchResults() {
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const query = searchParams.get('q');
// 使用查询参数进行搜索
return (
<>
<h1>搜索结果</h1>
<p>您搜索的关键字为：{query}</p>
{/* 渲染搜索结果 */}
</>
);
}
export default SearchResults;
- useNavigate
useNavigate是React Router库中的一个Hook函数，可以在函数组件中进行程序化的导航。在某些场景下，程序化的导航比使用链接更方便，例如表单提交成功后跳转到指定页面，或者根据某些条件进行页面跳转等。
在下面代码中，我们首先使用useNavigate()函数获取导航对象navigate，然后在登录成功后调用navigate()函数进行程序化导航，跳转到指定的页面。使用useNavigate()函数可以方便地进行程序化导航，从而提升应用的用户体验。
import React from 'react';
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
const handleLogin = () => {
//TODO: 登录逻辑
navigate('/dashboard');
}
return (
<form>
{/* 渲染表单 */}
<button type="submit" onClick={handleLogin}>登录</button>
</form>
);
}
export default Login;
2.3 子路由 和 404页面配置
React Router提供了一种组织嵌套路由的方式，叫做子路由。子路由可以让我们更加方便地组织和管理多层嵌套的路由，提高路由的可读性和可维护性。子路由也可以用于实现布局嵌套或者组件复用等操作。
useRoutes是 React Router v6 新增的 Hook，使用它可以让我们在组件内部创建嵌套路由，而不需要在组件路由外面套一层 配置。
使用 useRoutes 的语法相对简单，只需要给它传入一个配置对象，然后在对象的属性中定义路由即可。下面是一个简单的示例：
在下面的代码中，我们首先使用 useRoutes 初始化了一组路由，其中包括了 Home、About、Users、404 等多个路由。其中，Users 的子路由定义在了 children 属性中，可以看到使用起来还是很简单的。
import { useRoutes } from "react-router-dom";
function App() {
const routes = useRoutes([
{ path: "/", element: <Home /> },
{ path: "/about", element: <About /> },
{
path: "/users",
element: <Users />,
//子路由配置
children: [
{ path: "/", element: <UsersList /> },
{ path: "/:id", element: <UserProfile /> },
],
},
//404页面 配置
{ path: "*", element: <NotFound /> },
]);
return (
<div className="App">
{routes}
</div>
);
}
3. 路由使用流程
3.1 安装和配置 React Router
npm install react-router-dom --save
3.2 创建页面
3.3 配置路由 在src/router/index.jsx
// 路由配置
const routes = [
// element 节点方式引入
{ path: '/', element: <HomeView /> },
{ path: '/about', element: <AboutView /> }
]
3.4 创建路由组件 src/router/index.jsx
// 使用useRoutes 创建视图
export default function RouterView() {
// 创建路由
const elem = useRoutes(routes);
// 返回路由视图
return elem;
}
3.5 使用并切换路由 src/App.jsx
router-index.js完整代码
import { useRoutes } from "react-router-dom";
// 导入页面文件
import HomeView from "@/views/HomeView";
// import AboutView from "../views/AboutView";
import ProductView from "@/views/ProductView";
import AdminView from "@/views/admin/AdminView";
import DashView from "@/views/admin/DashView";
import OrderList from "@/views/admin/OrderList";
import NoMatch from "@/views/NoMatch";
// 引入权限组件
import Private from "./Private";
// 引入加载组件
import LazyLoad from "./LazyLoad";
// 路由配置
const routes = [
// element 节点方式引入
{ path: '/', element: <HomeView /> },
{ path: '/about', element: LazyLoad('AboutView') },
{ path: '/product/:id', element: <ProductView /> },
// 配置子路由
{
path: '/admin', element: <Private><AdminView /></Private>,
children: [
{ path: '', element: <DashView /> },
{ path: 'orderlist', element: <OrderList /> },
]
},
{ path: '*', element: <NoMatch /> }
]
// 使用useRoutes 创建视图
export default function RouterView() {
// 创建路由
const elem = useRoutes(routes);
// 返回路由视图
return elem;
}
以上就是react-router基本路由介绍啦