reactjs18 中使用路由技巧

news2024/12/30 2:42:35

react18 版本中，路由的用法发生了变化，react18 版本中，路由由 react-router-dom 包提供。与 react-router 包不同的是，react-router-dom 包提供了 createBrowserRouter 方法，该方法可以创建路由对象。总之，react-router6.x 版本的用法越来越接近 vue3.x 版本,互相借鉴互相学习，vue3 抄 react 的 hooks,react 18抄 vue 的 router 使用方式。

1. 安装依赖

npm install react-router-dom --save

2. 创建路由组件

在根目录下面创建 router 文件夹，在 router 文件夹下面创建 index.js 文件

import { createBrowserRouter } from "react-router-dom";
import Article from "../pages/Article";
import Login from "../pages/Login";

const router = createBrowserRouter([
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/article",
    element: <Article />,
  },
]);

export default router;

3. 在 App.js 中引入路由

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./store";
import { RouterProvider } from "react-router-dom";
import router from "./router";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      {/* {" 注册store "} */}

      <RouterProvider router={router}>
        {/* {"注册路由 "} */}
        <App />
      </RouterProvider>
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

懂 vue 的同学可以看出，这里注册 store,路由，其实和 vue 的 store,路由注册是一样的。
都是在入口文件中关联。只是方式略有差别。

4. 在组件中使用

1.路由传参的用法，第一种方式，查询参数和 vue 传参的用法基本一致。查询参数拼接在 url 后面，params 参数拼接在 url 后面。

import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";

const Login = () => {
  // 编程式导航
  const navigate = useNavigate();
  const handleNavigate = (item) => {
    navigate(`/article?id=${item.id}&title=${item.title}`);
  };
  // 构造一个文章列表json
  const articles = [
    {
      id: 1,
      title: "React",
    },
    {
      id: 2,
      title: "Vue",
    },
    {
      id: 3,
      title: "Angular",
    },
    {
      id: 4,
      title: "Flutter",
    },
  ];
  const renderList = () => {
    return articles.map((item) => {
      return (
        <div key={item.id}>
          <p>
            <span>{item.title}</span>
            <button onClick={() => handleNavigate(item)}>跳转</button>
          </p>
        </div>
      );
    });
  };
  return (
    <div>
      <h1>Login</h1>
      {/* 声明式写法 */}
      <Link to="/article">文章页</Link>
      <div>{renderList(articles)}</div>
    </div>
  );
};

export default Login;

5. 路由传参

目标页面接受参数，并渲染。

import { useSearchParams, useParams } from "react-router-dom";

const Article = () => {
  //获取路由参数
  const [params] = useSearchParams();
  console.log("🚀 ~ Article ~ useSearchParams():", params);
  const id = params.get("id");
  const title = params.get("title");

  return (
    <div>
      <h1>Article</h1>
      <div>
        <p>{id}</p>
        <p>{title}</p>
      </div>
    </div>
  );
};

export default Article;

请添加图片描述

2.路由传参的第二种方式，params 参数拼接在 url 后面。路径参数，在路由中声明。

const router = createBrowserRouter([
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/article/:id/:title", // 路径参数,此处必须声明
    element: <Article />,
  },
]);

跳转页面方法更改

const handleNavigate = (item) => {
  navigate(`/article/${item.id}/${item.title}`);
};

目标页面接受参数，并渲染。

import { useSearchParams, useParams } from "react-router-dom";

const Article = () => {
  //路由参数
  const params = useParams();
  const id = params.id;
  const title = params.title;
  console.log("🚀 ~ Article ~ title:", title);

  return (
    <div>
      <h1>Article</h1>
      <div>
        <p>{id}</p>
        <p>{title}</p>
      </div>
    </div>
  );
};

export default Article;