React中不使用<Link>组件如何实现URL地址变更？

基于React Router v6（主流版本） #

• 首先从react-router-dom引入useNavigate钩子获取导航能力
• 将需要监听的state变量加入useEffect的依赖数组，变量变更时自动触发导航逻辑

代码示例：

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

function DemoComponent() {
  // 需要监听变化的state变量
  const [filterValue, setFilterValue] = useState('');
  const navigate = useNavigate();

  useEffect(() => {
    // 可选：加判断逻辑避免初始渲染时触发不必要的跳转
    if (filterValue) {
      // 路径可根据业务需求拼接变量
      navigate(`/list/${filterValue}`);
      // 仅修改查询参数、不新增历史记录的写法：
      // navigate(`?filter=${filterValue}`, { replace: true });
    }
  }, [filterValue, navigate]);

  return <div>组件内容</div>
}

基于React Router v5 #

• 使用useHistory钩子替代v6的useNavigate即可，逻辑完全一致

代码示例：

import { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';

function DemoComponent() {
  const [filterValue, setFilterValue] = useState('');
  const history = useHistory();

  useEffect(() => {
    if (filterValue) {
      history.push(`/list/${filterValue}`);
      // 替换当前历史记录的写法：
      // history.replace(`/list/${filterValue}`);
    }
  }, [filterValue, history]);

  return <div>组件内容</div>
}

无React Router的原生实现 #

如果项目没有接入React Router，可以直接使用浏览器原生History API实现：

import { useEffect, useState } from 'react';

function DemoComponent() {
  const [filterValue, setFilterValue] = useState('');

  useEffect(() => {
    if (filterValue) {
      // 新增历史记录
      window.history.pushState({}, '', `/list/${filterValue}`);
      // 替换当前历史记录的写法：
      // window.history.replaceState({}, '', `/list/${filterValue}`);
    }
  }, [filterValue]);

  return <div>组件内容</div>
}

注意：原生API修改URL不会触发页面刷新，也不会被React Router的路由监听捕获，如果你用了React Router做路由管理，优先使用框架提供的钩子实现。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture