React路由路径不存在时如何重定向到默认路径？

实现方案 #

你使用的是react-router-dom v6版本，直接在现有Routes组件内新增一条通配未匹配路径的路由即可，修改后代码如下：

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
import HomePage from './screens/HomePage/home';

function App() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage/>} />
        {/* 新增通配路由，匹配所有未定义的路径 */}
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
}

export { App };

代码说明 #

• path="*"是react-router-dom v6的通配规则，会命中所有没有被前面路由匹配到的访问路径
• replace属性会替换浏览器历史栈中的无效路径记录，用户点击浏览器后退按钮时不会再跳回之前的无效地址，如果你不需要这个效果可以去掉该属性。

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