基本路由配置 🧭

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
</Router>
React_Router

嵌套路由实践 📂

<Route path="/dashboard">
  <Route path="/dashboard/users" component={Users} />
  <Route path="/dashboard/settings" component={Settings} />
</Route>
路由配置

动态路由参数 📝

<Route path="/user/:id" component={UserProfile} />

使用 useParams 获取参数：

const { id } = useParams();
动态路由

路由跳转技巧 🚀

  • 使用 useNavigate 实现编程式导航
  • 通过 useLocation 获取当前路径信息
  • 配合 react-router-dom 的 Link 组件实现声明式跳转

了解更多React Router高级用法 → react/router/