Link one page to another one in onChange Function

Question

I want to redirect the user to another page when the onChange of the Switch component is triggered. The function works but it does not redirect to the other page.

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} />)
        },
       }

    ]
  }     
}

Hello @Oğuzhan Aydın. Please provide some code snippets and/or error logs. — Hilmi Erdem KEREN, Jun 14 '19 at 14:11

score 0 · Accepted Answer · answered Jun 14 '19 at 14:34

The react-router <Link /> component is transpiled to an HTML anchor element like <a href="" />. And, you have to return it from the render function to achieve that.

However; it looks like you are trying to redirect the user to the given path on click. You have to use <Redirect /> in this case.

Here is an example:

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 })} />
    )
}

I didn't test the code but I hope that it is enough to present the concept.

@OğuzhanAydın It is nothing. If you approve my answer, It will be much appreciated! — Hilmi Erdem KEREN, Jun 16 '19 at 14:44

Link one page to another one in onChange Function

1 Answers1