Question

我想在触发Switch组件的onChange时将用户重定向到另一个页面。该功能有效，但不会重定向到其他页面。

function onChange(checked) {
  console.log(`switch to ${checked}`);

  {<Link to={`user/${checked.id}`}>{checked}</Link>}
 }

class List extends PureComponent {

  render() {   

    const columns = [
      {
        title: <Trans>OS</Trans>,
        dataIndex: 'avatar',
        key: 'avatar',
        width: 72,
        fixed: 'left',
        render: text => <Avatar style={{ marginLeft: 8 }} src={text} />,
      },

      {

       render: (e,text,record) => (< Switch  onChange={onChange(text,record)} 
        defaultChecked={e} />)
        },
       }

    ]
  }     
}

Answer 1

react-router <Link />组件被转换为HTML锚元素，例如<a href="" />。并且，您必须从render函数返回它来实现这一点。

但是；看起来您正在尝试将用户重定向到点击时的给定路径。在这种情况下，您必须使用<Redirect />。

这里是一个例子：

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  render () {
    const { redirect } = this.state;

    if (redirect) {
      return <Redirect to=`/user/${userId}`/>;
    }

    return (
      <Switch onChange={() => this.setState({ redirect: true })} />
    )
}

我没有测试代码，但我希望它足以介绍这个概念。

在onChange函数中将一页链接到另一页

1 个答案: