react-router-dom路由跳转

React-router-dom使用Link组件实现路由跳转，示例代码：

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

function App() {
  return (
    <div>
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
    </div>
  )
}

相关问题

react-router-dom v6路由怎么配置

在 react-router-dom v6 中，路由配置方式有所变化。以下是基本的路由配置方式：

1. 首先，需要安装 react-router-dom v6：

npm install react-router-dom@next

2. 在 App.js 文件中导入 `Routes` 和 `Route` 组件：

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

3. 在 `Routes` 组件中添加路由配置，其中 `Route` 组件定义了一个路由：

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

4. 在每个组件中，需要导入 `useNavigate` 钩子，用于在组件中进行页面跳转：

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

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

  const handleClick = () => {
    navigate('/about');
  };

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

5. 如果需要在组件中获取路由参数，可以使用 `useParams` 钩子：

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

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

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

以上就是 react-router-dom v6 路由的基本配置方式。

react-router-dom清空路由栈

如果想要清空 `react-router-dom` 的路由栈，可以使用 `history` 对象的 `replace` 方法，将当前路由替换为需要跳转到的路由。

具体步骤如下：

1. 在组件中引入 `withRouter` 高阶组件，以便获取 `history` 对象。

   import React from 'react';
   import { withRouter } from 'react-router-dom';
   
   function MyComponent(props) {
     // ...
   }
   
   export default withRouter(MyComponent);

2. 在需要清空路由栈的地方，获取 `history` 对象，并使用 `replace` 方法跳转到目标路由。

   function MyComponent(props) {
     function handleClick() {
       props.history.replace('/target-route');
     }
   
     return (
       <button onClick={handleClick}>跳转到目标路由</button>
     );
   }

这样，当前路由会被替换为目标路由，路由栈被清空，无法回退到之前的路由。