React Router 6中能否不通过重定向修改URL路径？

直接用路由库的嵌套路由功能就行，完美解决你的问题——不用重定向，也不用在App.tsx里给所有子组件传props，每个子路由组件自己管自己的逻辑和数据。

拿React Router v6举例子，操作步骤很简单：

1. 配置嵌套路由结构
   把/account设成父路由，下面嵌套dashboard和settings子路由。父路由对应的组件只需要留个Outlet位置，用来渲染子路由的内容就行：

   // 可以写在App.tsx里，也可以单独整个路由配置文件
   import { Routes, Route } from 'react-router-dom';
   import AccountLayout from './AccountLayout';
   import Dashboard from './Dashboard';
   import Settings from './Settings';
   
   function App() {
     return (
       <Routes>
         {/* 其他根路由该咋写咋写 */}
         <Route path="/account" element={<AccountLayout />}>
           {/* 访问/account的时候，默认渲染Dashboard */}
           <Route index element={<Dashboard />} />
           <Route path="dashboard" element={<Dashboard />} />
           <Route path="settings" element={<Settings />} />
         </Route>
       </Routes>
     );
   }
   

2. 做个账户布局容器（AccountLayout）
   这个组件就是账户页面的公共架子，比如放个侧边栏、导航栏啥的，不用管子组件的props，只需要用Outlet把位置留出来：

   // AccountLayout.tsx
   import { Outlet } from 'react-router-dom';
   
   export default function AccountLayout() {
     return (
       <div className="account-wrap">
         <aside>
           <a href="/account/dashboard">仪表盘</a>
           <a href="/account/settings">设置</a>
         </aside>
         {/* 子组件就渲染在这个Outlet里 */}
         <Outlet />
       </div>
     );
   }
   

3. 子组件自己搞定数据和props
   Dashboard和Settings组件不用等App.tsx传props，自己用自定义hooks、上下文或者接口请求拿数据就行：

   // Dashboard.tsx
   import { useAuth } from '../hooks/useAuth'; // 自己写的hook拿用户信息
   
   export default function Dashboard() {
     const { user } = useAuth();
     return <div>嗨，{user.name}，这是你的仪表盘</div>;
   }
   

   // Settings.tsx
   import { useState } from 'react';
   
   export default function Settings() {
     const [theme, setTheme] = useState('light');
     return (
       <div>
         <h3>账户设置</h3>
         <select value={theme} onChange={(e) => setTheme(e.target.value)}>
           <option value="light">浅色模式</option>
           <option value="dark">深色模式</option>
         </select>
       </div>
     );
   }
   

这么做的好处：

• 不用重定向：访问/account直接显示Dashboard，/account/dashboard和/account/settings直接对应组件，没有跳转过程
• 不用在App.tsx传一堆props：子组件自己找数据，根组件只管路由结构
• 公共布局复用：AccountLayout把账户页面的公共元素都统一管理，不用每个子组件重复写

要是用的是Vue Router这类其他路由库，核心思路也一样：配嵌套路由，父路由给布局和出口，子路由对应各自组件，组件自己管自己的props。

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