react路由简单使用

1.引入路由

npm install react-router-dom

2.在index.js中引入路由相关模块，并且创建路由实例

 引入模块：BrowserRouter，RouterProvider，createBrowserRouter

创建实例：router  

3.在render函数中渲染路由对应组件：

RouterProvider 是一个自定义组件，它接受一个名为 router 的参数作为属性。

 router 参数是router 实例，用来管理应用程序的路由功能。

RouterProvider 组件的主要作用是将这个路由实例提供给整个应用程序的组件层级，使得每个组件都能够访问和使用路由功能。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import Login from "./login";
import User from "./user";
import reportWebVitals from "./reportWebVitals";
import {
  BrowserRouter,
  RouterProvider,
  createBrowserRouter,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App></App>,
    children: [
      {
        path: "/login",
        element: <Login></Login>,
      },
      {
        path: "/user",
        element: <User></User>,
      },
    ],
  },
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);
reportWebVitals();

4.路由跳转

a.声明式导航

引入模块：

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

  使用方法,通过标签+属性的形式：

 <Outlet></Outlet>是嵌套路由时，用于展示跳转的页面，类似于vue的<router-view>

 <Link to={"/login"}>去登录页</Link>
 <Link to={"/user"}>去用户页</Link>
 <Outlet></Outlet>

b.编程式导航

引入模块：

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

 使用方法给元素，绑定事件，执行跳转函数

 jsx语法：

 <button onClick={goLogin}>去登录页</button>
 <button onClick={goUser}>去用户页</button>

相关函数：

const navigate = useNavigate();
  const goLogin = () => {
    navigate("/login");
  };
  const goUser = () => {
    navigate("/user");
  };


//navigate相当于useNavigate()的回调函数
useNavigate()的源码大概是：


import { useContext } from "react";
import { __RouterContext as RouterContext } from "react-router";

function useHistory() {
  const context = useContext(RouterContext);
  if (!context) {
    throw new Error("useNavigate must be used within a Router");
  }
  const { history } = context;
  return history;
}

function useNavigate() {
  const history = useHistory();
  return (to, options) => {
    history.navigate(to, options);
  };
}

export default useNavigate;

5.路由跳转传参

a.SearchParams传参

 <Link to={"/login?a=100&b=11"}>去登录页</Link>

或者

import {  useNavigate } from "react-router-dom"; 
const navigate = useNavigate();
  const goLogin = () => {
    navigate("/login?a=200&b=22");
  };

 

login组件接受参数：

import { useSearchParams } from "react-router-dom";
const Login = () => {
  const [params] = useSearchParams();
  const a = params.get("a");
  const b = params.get("b");
  console.log(a, b);
  return(
   <div></div>
)
}
export default Login;

b.params传参

//在router实例中使用：a，：b把参数表示出来
 {
    path: "/user/:a/:b",
    element: <User></User>,
 },

//跳转组件时使用  
 <Link to={"/user/100/200"}>去用户页</Link>

或

const goUser = () => {
    navigate("/user/200/100");
  };

 

//接受传参的组件
import { useParams } from "react-router-dom";
const User = () => {
  const params = useParams();
  let a = params.a;
  let b = params.b;
  console.log(a, b);
}
export default User;