面试题：React Router新特性对复杂路由场景的架构设计影响

路由架构设计

多嵌套层级：

在 React Router v6 中，可以利用 Outlet 组件来处理嵌套路由。例如，假设我们有一个管理后台应用，有一个主布局组件 AppLayout，在其中定义：

import { Routes, Route, Outlet } from'react-router-dom';

const AppLayout = () => {
    return (
        <div>
            {/* 页面通用布局部分 */}
            <Outlet />
        </div>
    );
};

const App = () => {
    return (
        <Routes>
            <Route path="/admin" element={<AppLayout />}>
                <Route path="dashboard" element={<Dashboard />} />
                <Route path="users" element={<Users />}>
                    <Route path=":userId" element={<UserDetails />} />
                </Route>
            </Route>
        </Routes>
    );
};

这样，Outlet 会渲染匹配到的子路由，使得嵌套路由结构清晰，代码可维护性高。

动态路由：
- 对于动态路由，React Router v6 依然支持在路径中使用参数。如上述代码中 users/:userId，可以在组件中通过 useParams 钩子获取参数：
```
import { useParams } from'react-router-dom';

const UserDetails = () => {
    const { userId } = useParams();
    // 根据 userId 进行数据获取等操作
    return <div>User {userId} details</div>;
};
```
- 这种方式便于处理动态内容，并且在更新版本中保持了一致性，有利于代码的扩展性。

权限控制：

可以通过自定义路由组件来实现权限控制。例如：

import { Route, Navigate } from'react-router-dom';
import { useAuth } from './AuthContext';

const ProtectedRoute = ({ element, path, roles }) => {
    const { user } = useAuth();
    const hasPermission = user && roles.includes(user.role);
    return hasPermission? <Route path={path} element={element} /> : <Navigate to="/login" />;
};

const App = () => {
    return (
        <Routes>
            <ProtectedRoute path="/admin/dashboard" element={<Dashboard />} roles={['admin', 'editor']} />
            <Route path="/login" element={<Login />} />
        </Routes>
    );
};

这里利用自定义的 ProtectedRoute 组件，结合上下文获取用户权限信息，根据权限决定是否允许访问路由，提高了代码的可维护性和扩展性。

新特性潜在问题及应对策略

路由匹配规则变化：
- 潜在问题：React Router v6 的路由匹配规则从 v5 的模糊匹配变为严格匹配。例如，在 v5 中 /users 可能匹配 /users/:userId，但在 v6 中不会。这可能导致一些老代码升级后，路由匹配出现问题。
- 应对策略：仔细检查路由配置，确保路径定义符合新的严格匹配规则。可以通过添加 index 属性来定义嵌套路由的默认子路由，如 <Route path="users" element={<Users />}> <Route index element={<UserList />} /> <Route path=":userId" element={<UserDetails />} /> </Route>，避免意外的路由匹配问题。
移除 withRouter 高阶组件：
- 潜在问题：在 React Router v6 中，withRouter 高阶组件被移除。如果项目中之前大量使用了 withRouter 来获取路由相关信息（如 history、location 等），升级后会导致相关功能失效。
- 应对策略：使用新的钩子函数来获取路由信息，如 useHistory 变为 useNavigate，useLocation 等钩子依然可用。将之前依赖 withRouter 的组件重构为使用这些新钩子，例如：
```
import { useNavigate } from'react-router-dom';

const MyComponent = () => {
    const navigate = useNavigate();
    const handleClick = () => {
        navigate('/new - route');
    };
    return <button onClick={handleClick}>Navigate</button>;
};
```
Switch 组件变为 Routes：
- 潜在问题：Switch 组件在 v6 中变为 Routes，并且行为有所改变。Switch 只会渲染第一个匹配的路由，而 Routes 会渲染所有匹配的路由。这可能导致一些依赖 Switch 单一匹配特性的代码出现重复渲染等问题。
- 应对策略：根据新的 Routes 组件特性，调整路由配置逻辑。如果仍然需要单一匹配效果，可以使用 Navigate 组件在匹配到某个路由后重定向到其他路由，以避免重复渲染，例如：
```
<Routes>
    <Route path="/old - route" element={<Navigate to="/new - route" />} />
    <Route path="/new - route" element={<NewComponent />} />
</Routes>
```

星途面试题库

面试题：React Router新特性对复杂路由场景的架构设计影响

知识考点

面试题答案

路由架构设计

新特性潜在问题及应对策略