reactjs18 中使用路由技巧

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}`);};// 构造一个文章列表jsonconst 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;