React Router访问父路由时如何自动跳转至首个嵌套子路由

针对/account路径自动跳转至/account/profile的嵌套路由需求，按当前主流使用的React Router版本分两种可直接落地的实现方式：

React Router v6 实现（官方推荐写法） #

用v6提供的index默认子路由搭配Navigate重定向组件实现，是最符合路由设计规范的方案，不会破坏嵌套路由的布局共享逻辑：

import { Routes, Route, Navigate } from 'react-router-dom';
import AccountLayout from './pages/Account';
import AccountProfile from './pages/Account/Profile';
import AccountSettings from './pages/Account/Settings';

export default function App() {
  return (
    <Routes>
      <Route path="/account" element={<AccountLayout />}>
        {/* 匹配父路由本身路径/account时生效 */}
        <Route index element={<Navigate to="profile" replace />} />
        <Route path="profile" element={<AccountProfile />} />
        <Route path="settings" element={<AccountSettings />} />
      </Route>
    </Routes>
  );
}

关键配置说明：

• 带index属性的路由为默认子路由，仅当父路由路径完全匹配、无后续子路径命中时渲染
• to属性传相对路径profile即可，框架会自动基于当前父路由路径拼接为完整路径/account/profile
• 必须加replace属性，替换当前历史记录栈条目，避免用户点击浏览器返回键时再次触发重定向造成死循环

如果不想在路由配置层写重定向，也可以直接在父路由布局组件内做跳转：

// /account 路径对应的父布局组件
import { useEffect } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';

export default function AccountLayout() {
  const navigate = useNavigate();
  useEffect(() => {
    navigate('profile', { replace: true });
  }, [navigate]);

  return (
    <div className="account-page">
      {/* 公共导航、侧边栏等共享布局写在这里 */}
      <Outlet /> {/* 子路由内容渲染出口 */}
    </div>
  );
}

React Router v5 兼容写法 #

如果是还在维护的v5老项目，直接用Redirect组件配置路径重定向即可：

import { Switch, Route, Redirect } from 'react-router-dom';
import AccountLayout from './pages/Account';
import AccountProfile from './pages/Account/Profile';
import AccountSettings from './pages/Account/Settings';

export default function App() {
  return (
    <Switch>
      {/* 精确匹配/account路径时重定向 */}
      <Route 
        path="/account" 
        exact 
        render={() => <Redirect to="/account/profile" />} 
      />
      <Route path="/account/profile" component={AccountProfile} />
      <Route path="/account/settings" component={AccountSettings} />
    </Switch>
  );
}

注意：不要在重定向逻辑里用push模式写入历史栈，否则会导致返回按钮操作异常。

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