React.js路由管理有哪些方法

React.js 路由管理的方法主要包括以下几种：

1. 声明式路由：这是最基础也是使用最广泛的方法，通过 <Link> 组件来定义导航链接，点击链接时，React Router 会自动更新浏览器的 URL 并渲染对应的组件。例如：

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于我们</Link></li>
      </ul>
    </nav>
  );
}

2. 编程式导航：通过 useNavigate 钩子（在函数组件中）或 withRouter 高阶组件（在类组件中）来实现程序的导航。例如：

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  const toDetail = () => {
    navigate("/detail");
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={toDetail}>跳转到详情页</button>
    </div>
  );
}

3. 动态路由：可以在路由路径中使用冒号 : 来定义参数，然后在组件中通过 props.match.params 来获取这些参数。例如：

<Route path="/profile/:userId" component={Profile} />

// 在 Profile 组件中
const Profile = (props) => {
  const { userId } = props.match.params;
  return <div>用户ID: {userId}</div>;
};

4. 嵌套路由：可以在父路由组件中嵌套子路由组件，实现复杂的页面结构。例如：

<Route path="/user/:id">
  <UserDetail />
  <UserPosts />
</Route>

5. 路由守卫：可以通过高阶组件或自定义钩子来实现路由守卫，控制用户对某些路由的访问权限。

6. 重定向：可以使用 <Redirect> 组件来实现页面重定向。

7. 404 错误处理：通过定义一个通配符路由（如 path="*"）来处理未匹配的 URL，并展示一个 404 错误页面。

8. 查询字符串参数：可以通过查询字符串将参数传递给特定路由下的组件，并在组件中通过 props.location.query 属性访问这些参数。

9. 自定义激活样式：可以使用 activeClassName 和 activeStyle 属性来自定义链接在激活状态下的样式。

10. 浏览器历史记录：React Router 使用 HTML5 的 History API 来保持 UI 和 URL 的同步，支持前进和后退操作。