react的路由实战使用

已于 2024-08-06 22:03:31 修改
阅读量381 收藏 18
点赞数 18
分类专栏： react 文章标签： react.js 前端 前端框架
于 2024-08-06 15:36:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47040462/article/details/140953414
版权

环境配置：vite+ts+react18

1、安装包

npm i react-router-dom

2、 根路由配置以及路由挂载

a、在src下面创建router文件夹配置简单的路由信息：

router/index.tsx

import { createBrowserRouter } from "react-router-dom";
import UserLogin from "@/views/login/loginPage";
import HomePage from "@/views/home/homePage";
import React from "react";
const router = createBrowserRouter([
  {
    path: "/login",//地址
    name: "login",//路由名
    // element: React.createElement(UserLogin),
    element: <UserLogin />,//要跳转的组件
  },
  {
    path: "/",
    name: "home",
    element: <HomePage />,
  },
]);

export default router;

 注意：这里有一个坑，我自己踩出来的：

1、如果要以组件的方式构建路由的话就要用tsx后缀命名

2、如果以React.createElement挂路由的话就用ts就可以

3、如果在ts下使用组件方式的路由是无法识别的，会报错哟

b、在实际开发中，一半选择app组件作为路由挂载导出：

app.tsx

import React from "react";
import { RouterProvider } from "react-router-dom";
import router from "./router";
const App: React.FC = () => {
  return <RouterProvider router={router} />;
};

export default App;

c、在main挂载app

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "antd/dist/reset.css";
import store from "./store";
import { Provider } from "react-redux";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
);

这样路由就可以使用了。不过现在只是通过手动访问可以了。

3、路由跳转

3.1、useNavigate（高）

  • 用途：用于程序化导航，允许你在组件内部触发跳转。
  • 示例
import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  function handleClick() {
    navigate('/some/path');
  }

  return (
    <button onClick={handleClick}>
      Go to '/some/path'
    </button>
  );
}

3.2、useLocation（高）

  • 用途：获取当前路由的位置信息。
  • 示例：
  • import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();

  return (
    <div>
      <h1>You are at: {location.pathname}</h1>
    </div>
  );
}

    3.3、useParams（高）

  • 用途：从当前 URL 中获取动态参数。常用于动态路由
  • 示例：
import { useParams } from 'react-router-dom';

function UserPage() {
  const params = useParams();

  return (
    <div>
      <h1>User ID: {params.userId}</h1>
    </div>
  );
}

3.4、useResolvedPath

  • 用途：解析一个路径到一个完整的路径对象。
  • 示例
import { useResolvedPath } from 'react-router-dom';

function Link({ to }) {
  let resolved = useResolvedPath(to);
  let href = resolved.pathname + resolved.search;

  return <a href={href}>{to}</a>;
}

3.5、useMatch:

  • 用途：检查一个路径是否与当前 URL 匹配。
  • 示例
import { useMatch } from 'react-router-dom';

function MyComponent() {
  const match = useMatch('/users/:userId');

  if (match) {
    return <div>User ID: {match.params.userId}</div>;
  }

  return null;
}

3.6、useOutlet

  • 用途：渲染嵌套路由的子路由内容。
  • 示例：
import { useOutlet } from 'react-router-dom';

function OutletComponent() {
  const outlet = useOutlet();

  return (
    <div>
      {outlet}
    </div>
  );
}

4、路由详细配置

4.1、配置详情

在 react-router-dom 中，路由配置通常包含以下几个关键的部分：

  1. path:

    • 用途：定义路由的路径模式。
    • 示例：

      typescript

      path: '/users/:userId',

    • 解释：这里的 path 定义了一个路径模式，其中 :userId 是一个动态参数。

  2. element:

    • 用途：定义当路由匹配时应该渲染的 React 组件。
    • 示例：

      typescript

      element: <UserProfile />,

    • 解释：当路径匹配时，<UserProfile /> 组件将会被渲染。

  3. index (可选):

    • 用途：表示这是一个索引路由，当没有具体路径匹配时渲染。
    • 示例：

      typescript

      index: true, element: <Home />,

    • 解释：当路径为空或者没有具体的匹配时，<Home /> 组件将会被渲染。

  4. children (可选):

    • 用途：定义嵌套路由。
    • 示例：

      typescript

      children: [ { path: 'profile', element: <Profile />, }, ],

    • 解释：这里的 children 定义了一个子路由，当父路由匹配时，子路由也会被考虑。

  5. loader (可选):

    • 用途：加载数据的函数，常用于数据预取。
    • 示例：

      typescript

      loader: () => fetch('/api/data'),

    • 解释：这个函数会在路由激活前执行，通常用来获取数据。

  6. errorElement (可选):

    • 用途：定义当路由发生错误时渲染的组件。
    • 示例：

      typescript

      errorElement: <Error />,

    • 解释：当路由加载过程中出现错误时，<Error /> 组件会被渲染。

  7. caseSensitive (可选):

    • 用途：定义路径匹配是否区分大小写。
    • 示例：

      typescript

      caseSensitive: true,

    • 解释：默认情况下路径匹配是不区分大小写的，但可以通过此选项改变这一行为。

4.2、例子

typescript

import { createBrowserRouter, RouterProvider, Route } from "react-router-dom";
import RootLayout from "./layouts/RootLayout";
import Home from "./pages/Home";
import About from "./pages/About";
import Users from "./pages/Users";
import UserProfile from "./pages/UserProfile";

// 定义路由对象
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "about",
        element: <About />,
      },
      {
        path: "users",
        element: <Users />,
        children: [
          {
            path: ":userId",
            element: <UserProfile />,
          },
        ],
      },
    ],
  },
]);

// 在 App 组件中使用 RouterProvider 提供路由配置
function App() {
  return (
    <RouterProvider router={router} />
  );
}

export default App;

解释：

  • path: 定义了路由的路径模式。
  • element: 定义了对应的 React 组件。
  • index: 表示这是默认路由。
  • children: 定义了嵌套路由。

这些是构建路由的基本组成部分。根据你的应用需求，你可能会使用到更多的特性，例如 loader 和 errorElement 等。

5、路由重定向

5.1、条件重定向

比如用户是否已登录。这种情况下，你可以在路由组件中使用条件逻辑来决定是否重定向。

import { Navigate, createBrowserRouter } from "react-router-dom";
import UserLogin from "@/views/login/loginPage";
import HomePage from "@/views/home/homePage";
import React from "react";
import { getToken } from "../utils/storeages";
const isLogin = getToken("token");
const router = createBrowserRouter([
  {
    path: "/login",
    name: "login",
    // element: React.createElement(UserLogin),
    element: <UserLogin />,
  },
  {
    path: "/",
    name: "home",
    element: isLogin ?  <HomePage /> : <Navigate to="/login"  replace />,//条件判断
  },
]);

export default router;

 5.2、直接重定向--redirect

推荐使用这一个，方便用于登录认证

import { Navigate, createBrowserRouter, redirect } from "react-router-dom";
import UserLogin from "@/views/login/loginPage";
import ModelPage from "@/views/model";
import HomePage from "@/views/home/homePage";
import DashboardPage from "@/views/Dashboard/DashboardPage";
import React from "react";
import { getToken } from "../utils/storeages";

const router = createBrowserRouter([
  {
    path: "/login",
    name: "login",
    element: <UserLogin />,
    loader: () => {
      console.log(getToken("token"));
      if (getToken("token")) {
        console.log(1111);
        return redirect("/home");
      } else {
        console.log(2222);
        return redirect("/login");
      }
    },
  },
  {
    path: "/",
    name: "model",
    element: <ModelPage />,
    children: [
      {
        path: "/home",
        name: "home",
        element: <HomePage />,
      },
      {
        path: "/dashboard",
        name: "dashboard",
        element: <DashboardPage />,
      },
      {
        path: "*",
        element: <Navigate to="/home" />,
      },
    ],
  },
]);

export default router;

 6、动态路由

动态路由其实很简单，简单来说就是一个组件展示不同的数，类似于查看用户信息。每个用户信息不一样，但是组件只有一个。

配置动态路由：
router.tsx

import { Navigate, createBrowserRouter } from "react-router-dom";
import UserLogin from "@/views/login/loginPage";
import HomePage from "@/views/home/homePage";
import React from "react";
import { getToken } from "../utils/storeages";
const isLogin = getToken("token");
console.log(isLogin);
const router = createBrowserRouter([
  {
    path: "/login",
    name: "login",
    // element: React.createElement(UserLogin),
    element: <UserLogin />,
  },
  {
    path: "/home/:userId",//动态参数
    name: "home",
    // element: isLogin ?  <HomePage /> : <Navigate to="/login"  replace />,
    element:<HomePage />,
  },
]);

export default router;

跳转的起点：


import React from "react";
import { useNavigate } from "react-router-dom";
const UserLogin: React.FC = () => {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/home/1");
  }
  return (
    <div >
      <button onClick={handleClick}>Go to User 1</button>
    </div>
  );
};

export default UserLogin;

跳转的目标：

import React from "react";
import { useParams } from "react-router-dom";
const HomePage: React.FC = () => {
  const {userId} = useParams()
  console.log(userId);
  return <div>homePage{userId}</div>;
};

export default HomePage;

这样就实现了一个组件多用的情况，其实就是展示不同的信息

 7、嵌套路由（子路由）

配置嵌套路由：

import { Navigate, createBrowserRouter } from "react-router-dom";
import UserLogin from "@/views/login/loginPage";
import HomePage from "@/views/home/homePage";
import HaderPage from '@/views/home/header/header'
import React from "react";
const router = createBrowserRouter([
  {
    path: "/login",
    name: "login",
    element: <UserLogin />,
  },
  {
    path: "/home",
    name: "home",
    element:<HomePage />,
    children: [
      {
        path: "/home/header",
        name: "header",
        element: <HaderPage />,
      },
    ],
  },
]);

export default router;

配置home组件：

import React from "react";
import { useParams,useNavigate,Outlet } from "react-router-dom";
const HomePage: React.FC = () => {
  const {userId} = useParams()
  const navigate = useNavigate()
  console.log(userId);
  const headerButon = () => {
    console.log(111);
    navigate("/home/header")
  };
  return (
    <div>
          <div>homePage{userId}</div>
    <button onClick={() => {headerButon()}}>展示header</button>
    <Outlet/>
    </div>
  );
};

export default HomePage;

展示的子组件：

import React from "react";
const HeaderPage: React.FC = () => {
  return <div>HeaderPage</div>;
};

export default HeaderPage;

具体操作：

1、首先在router配置好子组件

2、创建子组件

3、在home组件添加路由跳转到/home/header子组件，并且用    <Outlet/>展示子组件的位子

注意：

1、必须要有    <Outlet/>，不然子组件不会展示

8、默认路由

在实际开发中在未操作的情况下会默认展示一个页面，这个页面我们成为默认路由页面 

import { Navigate, createBrowserRouter } from "react-router-dom";
import UserLogin from "@/views/login/loginPage";
import ModelPage from "@/views/model";
import HomePage from "@/views/home/homePage";
import DashboardPage  from "@/views/Dashboard/DashboardPage";
import React from "react";

const router = createBrowserRouter([
  {
    path: "/login",
    name: "login",
    element: <UserLogin />,
  },
  {
    path: "/",
    name: "model",
    element: <ModelPage />,
    children: [
      {
        path: "/home",
        name: "home",
        element: <HomePage />,
      },
      {
        path: "/dashboard",
        name: "dashboard",
        element: <DashboardPage />,
      },
      {
        path: "*",//默认路由指向的页面
        element: <Navigate to="/home" />,
      },

    ],
  },
]);

export default router;

9、路由守卫

方法 1: 使用 useEffect 和 useHistory / useNavigate

这种方法适用于需要在组件加载前执行某些逻辑的情况。例如，检查用户是否已登录或是否有权限访问某个页面。

import React, { useEffect } from 'react';
import { useNavigate } from "react-router-dom";

function ProtectedRoute({ children }) {
  const navigate = useNavigate();
  const isLoggedIn = false; // 假设这是从你的应用状态中获取的值

  useEffect(() => {
    if (!isLoggedIn) {
      // 如果用户未登录，则重定向到登录页面
      navigate('/login');
    }
  }, [isLoggedIn, navigate]);

  return isLoggedIn ? children : null;
}

function App() {
  return (
    <div>
      <ProtectedRoute>
        <h1>Welcome to the protected area!</h1>
      </ProtectedRoute>
    </div>
  );
}

export default App;

方法 2: 使用自定义高阶组件 (HOC)

这种方法可以让你更灵活地控制路由组件的行为，特别是在需要复用相同逻辑的情况下。

import React from 'react';
import { useNavigate } from "react-router-dom";

function withAuth(WrappedComponent) {
  return function AuthenticatedComponent(props) {
    const navigate = useNavigate();
    const isLoggedIn = false; // 假设这是从你的应用状态中获取的值

    if (!isLoggedIn) {
      // 如果用户未登录，则重定向到登录页面
      navigate('/login');
      return null;
    }

    return <WrappedComponent {...props} />;
  };
}

function ProtectedPage() {
  return (
    <div>
      <h1>Welcome to the protected area!</h1>
    </div>
  );
}

const AuthenticatedProtectedPage = withAuth(ProtectedPage);

function App() {
  return (
    <div>
      <AuthenticatedProtectedPage />
    </div>
  );
}

export default App;

方法 3: 使用 Route 的 element 属性

在 React Router v6 中，你可以直接在 Route 的 element 属性中定义一个组件，该组件负责路由守卫的逻辑。

import React from 'react';
import { createBrowserRouter, RouterProvider, Route, Link, useNavigate } from "react-router-dom";

function ProtectedPage() {
  const isLoggedIn = false; // 假设这是从你的应用状态中获取的值
  const navigate = useNavigate();

  if (!isLoggedIn) {
    // 如果用户未登录，则重定向到登录页面
    navigate('/login');
    return null;
  }

  return (
    <div>
      <h1>Welcome to the protected area!</h1>
    </div>
  );
}

function App() {
  return (
    <div>
      <Route path="/protected" element={<ProtectedPage />} />
    </div>
  );
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '/protected',
        element: <ProtectedPage />,
      },
    ],
  },
]);

function Root() {
  return (
    <RouterProvider router={router} />
  );
}

export default Root;

方法 4: 使用 useLocation 和条件渲染

这种方法适用于需要在组件内部根据当前 URL 执行某些逻辑的情况。

import React, { useEffect } from 'react';
import { useNavigate, useLocation } from "react-router-dom";

function ProtectedRoute({ children }) {
  const navigate = useNavigate();
  const location = useLocation();
  const isLoggedIn = false; // 假设这是从你的应用状态中获取的值

  useEffect(() => {
    if (!isLoggedIn && location.pathname === '/protected') {
      // 如果用户未登录并且试图访问受保护的页面，则重定向到登录页面
      navigate('/login');
    }
  }, [isLoggedIn, navigate, location]);

  return isLoggedIn ? children : null;
}

function App() {
  return (
    <div>
      <ProtectedRoute>
        <h1>Welcome to the protected area!</h1>
      </ProtectedRoute>
    </div>
  );
}

export default App;

总结

  • 使用 useEffect 和 useHistory / useNavigate:

    • 适用于简单的场景，可以在组件加载时检查条件并进行重定向。

  • 使用自定义高阶组件 (HOC):

    • 更适合需要复用相同逻辑的情况，可以方便地应用于多个组件。

  • 使用 Route 的 element 属性:

    • 直接在 Route 的 element 属性中定义一个组件，该组件负责路由守卫的逻辑。

  • 使用 useLocation 和条件渲染:

    • 适用于需要根据当前 URL 执行某些逻辑的情况。

选择哪种方法取决于你的具体需求和应用场景。

古德猫码农
关注
  • 18
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React开发实战完整版，直接下载
06-22
本资源"React开发实战完整版"提供了全面的学习指南，旨在帮助开发者深入理解React，并能实际应用于项目开发中。 在React开发中，以下几个核心知识点至关重要： 1. 组件化：React的核心概念就是组件，每个组件都是...
React实战开发.pptx
08-04
该课程涵盖了 React 的基础知识和实战经验，包括 Webpack 配置、React 基础知识、路由配置、状态管理等。 一、Webpack 配置 * Webpack 是一个模块打包器，主要目标是将 JavaScript 文件打包在一起，用于在浏览器中...
react项目实战 3 配置基础路由
m0_45877477的博客
08-02 416
1 安装路由 npm i react-router-dom@5.2.0 2 在pages下新建两个文件CityList/index.js和Home/index.js, 创建对应的组件 3 导入路由 Router、Route、Link 4 使用Route组件配置 首页 和 城市选择页面
php react路由部署,React路由管理React Router使用步骤详解
weixin_32691939的博客
03-10 137
这次给大家带来React路由管理React Router使用步骤详解，React路由管理React Router使用的注意事项有哪些，下面就是实战案例，一起来看一下。React项目通常都有很多的URL需要管理，最常使用的解决方案就是React Router了，最近学习了一下，主要是看了一下官方的英文文档，加以总结，以备后查。React Router是做什么的呢，官方的介绍是：A complete ...
React实战 - React路由鉴权
qq_35729091的博客
08-21 1044
关于配置的属性值其实就是React-router所需要的传入参数，包括key，path，exact，component，而导航是配置了三个属性：title（导航名称），key和对应的path。这样我们的路由配置部分就完成了。有了配置之后，就需要把配置在组件内做渲染，这时就需要定义一个通用的函数，它的输入就是上面的配置对象，而输入则是React-router组件。首先我们创建一个配置js文件，用于存放之前我们分析的两种路由配置，另外由于管理后台的菜单路由也是关联的，也同时要创建一个导航的配置。
React项目路由实战
m0_74331185的博客
03-28 797
react中路由中文文档。
react umi实战
lin_fightin的博客
11-08 959
umi umiJs是一个类Next.JS的react开发框架 它基于一个约定，即pages目录下的文件即路由，而文件则导出react组件。 然后打通从源码到产物的每个阶段，并配以完善的插件体系，让我们能把umi的产物部署到各个场景里面 初始化项目 npm i umi -g umi g page index dev也是基于webpack-dev-server启动的。 约定式路由。 跳转 全局layout 约定src/layouts/index.js为全局组件，返回一个React组件，通过pr
react实战——react旅游网
最新发布
weixin_46515434的博客
03-07 956
在利用typescript编写react项目时，函数式组件需要定义返回值类型。传递的props参数的类型，就是使用interface泛型定义的以下是编写状态管理createSlice：action与reducer捆绑在一起了将detail从MVC修改到redux-tooltik以下是编写异步数据操作。
React路由的使用步骤和执行过程
Aa112233aA1的博客
06-16 368
前端web开发面试：React路由的使用步骤和执行过程
React Native项目实战
weixin_50983325的博客
08-30 3686
调试接口 API 调试工具是用来对 API 接口进行调试的。比较出名的有 Postman，Insomnia、Postwoman 等。本节以 Insomnia 为例。 首先，需要跳转到 Insomnia 官网，下载（Insomnia Core）：https://insomnia.rest/download然后执行安装。 然后，配置开发环境。 配置完之后，就可以根据接口（例如：和风天气接口）的使用规则，在 Insomnia 中调试接口了。使用效果如下： 调用接口 React Native 提供了和 web
React 项目实战 路由和页面组件创建
quitv的博客
08-06 519
1.项目创建和组件安装 创建项目 npx create-react-app myapp #antd npm i antd 指定安装固定antd版本： npm i antd@2.10.4 —save (在 node_modules同级目录下) #路由 npm i react-router-dom 搭建目录结构 首先建立两个文件 一个pages 保存页面信息 一个components 存放组件信息 在pages 里面创建一个登录页面 Login.js ,在创建一个所有管理后台的页面叫做admin 。
React开发实战高清.zip
10-20
总的来说，这个"React开发实战高清"教程可能涵盖了React的基本概念、组件开发、状态管理、路由、性能优化、测试等多个方面，对于想要深入学习React开发的初学者或者寻求提升的开发者来说，都是非常有价值的资源。
React开发实战
03-25
React鼓励使用声明式编程，让代码更易于理解和维护。 jsx是React中的特殊语法，它允许我们在JavaScript中编写类似HTML的结构。jsx将HTML元素转换为React元素，使得在JavaScript中构建UI变得直观且简洁。例如，`...
使用React-Router实现前端路由鉴权的示例代码
11-20
React-Router 是React生态系统中的关键组件，用于在前端管理单页应用（SPA）的路由。在传统的Web应用中，路由通常由服务器控制，但随着SPA的流行，前端开始负责处理路由，以提供更流畅的用户体验。React-Router 提供...
react初学者实战资料
03-30
3. 路由：对于多页面应用，需要使用React Router来管理页面间的导航。 4. 工具链：Webpack和Babel是React开发的常用工具链，它们负责代码打包和转换。 通过这个实战例子，你将能够从零开始构建一个功能完整的React...
《React开发实战》初级入门篇
07-04
《React开发实战》初级入门篇是一本旨在帮助新手快速入门React开发的教程，通过实例教学，使得学习过程更加直观易懂。 1. **React基础知识**：React是由Facebook开发的一个JavaScript库，主要用于构建用户界面，...
React的学习过程中记录的知识点—–路由切换的性能问题
01-07
React Router 是目前最常用的React路由库，它可以帮助开发者轻松地为React应用添加导航功能。React Router的核心概念包括`<Route>`、`<Switch>`（现在称为`<Routes>`）等，它们共同构成了React应用的基础路由结构。 ...
vue-react-h5实战遇到的问题.docx
04-17
在实际开发Vue、React和H5项目时，优化是提高性能的关键。一些常见的优化策略包括： 1. **减少合并请求**：通过合并CSS和JavaScript文件，使用Webpack等构建工具，可以减少网络请求次数，从而提高加载速度。 2. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值