如何防止react-router-dom嵌套路由与路由参数混淆

基础概念

React Router 是一个用于在 React 应用程序中实现客户端路由的库。react-router-dom 是 React Router 的 DOM 版本，适用于 Web 应用程序。嵌套路由是指在一个路由组件内部定义子路由，而路由参数是指在路由路径中定义的动态部分，通常用于获取特定数据。

类型

绝对路径路由：路径从根路径开始，如 /home。
相对路径路由：路径相对于当前路径，如 ./about。
参数化路由：路径中包含动态参数，如 /user/:id。

应用场景

嵌套路由和路由参数广泛应用于各种需要动态内容展示的 Web 应用程序，如博客系统、电子商务平台、社交网络等。

遇到的问题及解决方法

问题：嵌套路由与路由参数混淆

原因：当嵌套路由和路由参数结合使用时，可能会出现路径解析错误或参数获取不正确的问题。

解决方法：

明确路径定义：确保每个路由的路径定义清晰，避免路径冲突。
使用 useParams 和 useLocation 钩子：在组件内部使用这些钩子来获取路由参数和当前路径信息。
正确配置嵌套路由：确保嵌套路由的配置正确，父路由和子路由的路径不要重叠。

示例代码

import { BrowserRouter as Router, Route, Link, Switch, useParams } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/user/123">User 123</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/user/:id" component={User} />
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function User() {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

export default App;