React Router v6 的路由切换实现方式

首先需要先引入路由库，并配置好路由规则。

在React Router v6中，可以使用<Routes>和<Route>组件来定义路由规则。

例如：

# 使用<Routes>和<Route>组件来定义路由规则。<Route>组件的path属性指定了路由的路径，element属性指定了渲染该路由时要使用的组件

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

在React Router v6中，可以通过以下两种方式来更新路由：

1、使用编程式导航：通过编写代码来实现路由的切换，一般使用路由库提供的API来实现。例如，在React Router v6中，可以使用useNavigate hook来获取navigate函数，然后调用该函数来实现路由的切换。

例如：

# 使用useNavigate hook获取了navigate函数，然后在handleClick方法中调用该函数来切换路由。

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  function handleClick() {
    navigate('/about');
  }

  return (
    <button onClick={handleClick}>Go to About page</button>
  );
}

2、使用声明式导航：通过在JSX中声明路由链接，用户点击链接时会自动切换到对应的路由。例如，在React Router v6中，可以使用<Link>组件来实现声明式导航。

例如：

# 使用<Link>组件来声明路由链接，当用户点击该链接时，会自动切换到/about路由

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

function MyComponent() {
  return (
    <Link to="/about">Go to About page</Link>
  );
}