React Router v6的路由路径解析相比v5有了显著变化，主要体现在Routes组件替代了Switch，以及useNavigatehook的引入。本文将深入探讨v6中的路径配置技巧。
核心配置变更
在v6中，需要使用Routes组件包裹所有路由规则，而非之前的Switch。这使得路由匹配逻辑更加清晰：
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
}
动态路径参数处理
v6中获取动态参数使用useParamshook，而非v5中的props.params：
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>用户ID: {id}</div>;
}
导航跳转技巧
使用useNavigate进行程序化导航，替代v5中的history.push：
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/user/123');
// 或者 navigate(-1) 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}
嵌套路由配置
v6支持更灵活的嵌套路由结构，通过相对路径和绝对路径混合使用：
<Routes>
<Route path="/admin" element={<AdminLayout>}>
<Route index element={<Dashboard />} />
<Route path="users" element={<UserList />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
路由守卫实现
通过useEffect和useNavigate组合实现路由守卫：
function ProtectedRoute({ children }) {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const navigate = useNavigate();
useEffect(() => {
if (!isAuthenticated) {
navigate('/login');
}
}, [isAuthenticated, navigate]);
return isAuthenticated ? children : null;
}
注意事项
- 所有路由必须包裹在
Routes中 - 不再支持
component属性，统一使用element - 路由参数获取方式从props改为hook
- 路由跳转需使用新的navigate API
通过以上配置，可以顺利完成v6版本的路由路径解析迁移工作。
讨论