React.js中如何根据输入跳转网页？性别场景及browserHistory.push用法咨询

当然可以用browserHistory.push()来实现这个性别选择跳转的需求，但具体怎么用得看你项目里装的React Router版本——毕竟不同版本的路由API变化还挺大的，我给你分情况捋清楚：

如果你用的是React Router v4及以上（现在主流是v6） #

注意哦，从v4开始，browserHistory就不再直接对外暴露了，得用对应的钩子函数来获取跳转能力：

函数组件（React Router v6） #

这是现在最常用的写法，用useNavigate钩子：

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

function GenderSelector() {
  // 获取跳转方法
  const navigate = useNavigate();

  const handleGenderChoice = (gender) => {
    // 根据性别判断跳转路径
    const targetPath = gender === 'male' ? '/male-dashboard' : '/female-profile';
    navigate(targetPath);
  };

  return (
    <div className="gender-select">
      <button onClick={() => handleGenderChoice('male')}>我是男性</button>
      <button onClick={() => handleGenderChoice('female')}>我是女性</button>
    </div>
  );
}

函数组件（React Router v4/v5） #

如果你的项目还在用v4或v5，那就用useHistory钩子：

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

function GenderSelector() {
  const history = useHistory();

  const handleGenderSelect = (gender) => {
    const path = gender === 'male' ? '/male-page' : '/female-page';
    history.push(path); // 这里的push和你说的browserHistory.push作用一致
  };

  // 渲染部分和上面示例一致
}

如果你用的是React Router v3及更早版本 #

这种旧版本里，browserHistory是可以直接导入使用的，写法完全符合你的预期：

import { browserHistory } from 'react-router';

const handleGenderSelect = (gender) => {
  const targetPath = gender === 'male' ? '/male-page' : '/female-page';
  browserHistory.push(targetPath);
};

几个要注意的小细节 #

• 别忘了在你的路由配置文件里，已经正确定义了/male-page、/female-page这些路径对应的组件，不然跳转过去会显示空白或者404哦。
• 如果你的组件是类组件（v4/v5），可以用withRouter高阶组件包裹，就能在props里拿到history对象，然后调用history.push()；v6里更推荐转成函数组件，或者用<Navigate>组件来实现跳转。

内容的提问来源于stack exchange，提问作者Zaid