react-router导航传参

// 1. 创建项目并安装所有依赖
npx create-react-app react-router-pro
// 2. 安装最新的 ReactRouter包
npm i react-router-dom

导航跳转

搭建路由

src/router/index.js

// 组件引入
import Login from "../page/Login";
import Article from "../page/Article";
import Layout from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";

// 路由引入
import { createBrowserRouter } from "react-router-dom";

// 1. 创建router实例对象并且配置路由对应关系
const router= createBrowserRouter([
    {
        path: '/',
        element: <Layout />,
        children: [{
            path: 'board',
            element: <Board />
        },
        {
            // 默认路由
            index: true,
            element: <About />
        }]
    },
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '/article/:id',
        element: <Article />
    }
])

export default router

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

import { RouterProvider } from "react-router-dom";

// 1. 导入路由
import router from "./router";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

reportWebVitals();

src/Login/index.js

传参

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

const Login = () => {
    const navigate = useNavigate()
  return (
    <div>
      登录
      {/* 声明式导航 */}
      <Link to="/article">文章</Link>
      {/* 命令式导航 */}
      <button onClick={() => navigate('/article?id=11&name=merry')}>跳转</button>
      {/* <button onClick={() => navigate('/article/1001')}>跳转</button> */}
    </div>
  );
};

export default Login;

src/Article/index.js

接收参数

import { useSearchParams } from "react-router-dom"
const Article = () => {
    const [params] = useSearchParams()
    const id = params.get('id')

    // const params = useParams()
    // const id = params.id

    return <div>文章{id}</div>
}

export default Article

 layout

import { Outlet } from "react-router-dom";

const Layout = () => {
  return (
    <div>
      Layout
      {/* 配置二级路由的出口 */}
      <Outlet />
    </div>
  );
};

export default Layout;