如何使用React Router v6实现客户端自动重定向？

React Router v6 版本已完全移除 v5 提供的 <Redirect> 组件，直接沿用v5的重定向写法会触发如下报错：
export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'

v6版本的重定向需要使用内置的Navigate组件实现，和v5写法的对应修改点如下：

• 导入时将Redirect替换为Navigate，同时注意v5的<Switch>组件在v6中已更名为<Routes>，需要同步替换
• 原<Redirect to="目标路径" />的位置，替换为<Navigate to="目标路径" replace />，添加replace属性会替换当前路由栈记录，和v5中Redirect的默认行为一致，避免用户点击浏览器返回按钮时再次触发重定向

修改后的可运行代码示例：

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
// 其他业务组件导入

function App() {
  // 其他业务逻辑

  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/project" element={<Navigate to="/project/list" replace />} />
        <Route path="/project/list" element={<ProjectListPage />} />
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

注意：当前搜索引擎搜索react router redirect返回的置顶结果多为v5版本过时文档，API和v6完全不兼容，配置时不要直接参考v5文档的写法。

内容的提问来源于stack exchange，提问作者Paul Smith