ReactJS中如何处理react-router-dom未匹配的非法URL路径问题

问题原因 #

你仅配置了明确路径的路由规则，未配置路径不匹配时的兜底逻辑，因此访问未注册的路径时没有对应组件渲染，就会出现空白页。

注意事项 #

• 所有兜底路由必须放在路由规则列表的最后，路由匹配是从上到下依次命中的，提前放置兜底路由会导致后面的正常路由无法被匹配。
• 如果你的项目使用的是history路由模式（非hash模式），部署到生产环境时还需要配置服务端路由重定向规则，将所有请求指向入口index.html，否则刷新非首页路径时会出现服务端404错误。

针对 react-router-dom v5 版本 #

方案1：配置404提示页 #

使用<Switch>组件包裹所有路由，<Switch>只会匹配第一个符合路径规则的路由，最后添加不带path属性的Route作为兜底：

import { Switch, Route } from 'react-router-dom';
import Home from './Home';
import NotFound from './NotFound'; // 自行实现的404页面组件

function App() {
  return (
    <Switch>
      <Route path='/home' component={Home} />
      {/* 兜底路由放在最末 */}
      <Route component={NotFound} />
    </Switch>
  )
}

方案2：未匹配路径自动跳转到首页 #

不需要404页面的场景，可使用<Redirect>组件实现重定向：

import { Switch, Route, Redirect } from 'react-router-dom';
import Home from './Home';

function App() {
  return (
    <Switch>
      <Route path='/home' component={Home} />
      {/* 兜底重定向到首页 */}
      <Redirect to='/home' />
    </Switch>
  )
}

针对 react-router-dom v6 版本 #

v6版本移除了<Switch>和<Redirect>组件，改用<Routes>和<Navigate>替代，兜底路由使用path='*'匹配所有未命中路径：

方案1：配置404提示页 #

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import NotFound from './NotFound';

function App() {
  return (
    <Routes>
      <Route path='/home' element={<Home />} />
      {/* 兜底路由 */}
      <Route path='*' element={<NotFound />} />
    </Routes>
  )
}

方案2：未匹配路径自动跳转到首页 #

import { Routes, Route, Navigate } from 'react-router-dom';
import Home from './Home';

function App() {
  return (
    <Routes>
      <Route path='/home' element={<Home />} />
      {/* 兜底重定向到首页，replace属性避免浏览器残留无效历史记录 */}
      <Route path='*' element={<Navigate to='/home' replace />} />
    </Routes>
  )
}

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