React路由的跳转和传参数

2023-11-15 21:08:51

在React中，有两种常用的路由跳转方式：Link和NavLink。

Link

Link组件是React路由库中常用的组件之一，它用于在不同页面之间进行跳转。Link组件的使用非常简单，只需要在组件中指定跳转的路径即可。例如：

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

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">About</Link>
    </div>
  );
};

当用户点击Link组件时，就会跳转到指定的页面。

NavLink

NavLink组件与Link组件非常相似，但它多了几个额外的特性。NavLink组件可以设置当前活动的tab标签的样式，并且它可以传递参数。例如：

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

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <NavLink to="/about/1">About 1</NavLink>
      <NavLink to="/about/2">About 2</NavLink>
    </div>
  );
};

当用户点击NavLink组件时，就会跳转到指定的页面，并且当前活动的tab标签的样式也会发生改变。

传递参数

Link和NavLink组件都可以传递参数。参数可以是字符串、数字、对象等。例如：

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

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about/1">About 1</Link>
      <Link to="/about/2">About 2</Link>
    </div>
  );
};

当用户点击Link组件时，就会跳转到指定的页面，并且参数也会传递到该页面。

获取参数

在目标页面中，可以使用useParams()钩子来获取传递的参数。例如：

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

const About = () => {
  const { id } = useParams();

  return (
    <div>
      <h1>About {id}</h1>
    </div>
  );
};