Make a Table Row redirect to a link when it's clicked

Question

Having a tabe with multiple rows I want to redirect to other page when it's clicked.

import React from 'react';
import { Table, Image } from 'semantic-ui-react';
import { Redirect } from 'react-router-dom';

  <Table.Row
      key={myKey}
      onClick={() => <Redirect to={`/another_page/${myKey}}` />}>
      {emptyFirstHeader && (
        <Table.Cell>
          <Image
           stc={blabla}
          />
        </Table.Cell>
      ...
   <Table.Row>

I did it like this but it doesn't do anything.

Answer 1

Redirect works with switch and route. You can try this:

import React from 'react';
import { Table, Image } from 'semantic-ui-react';
import { useHistory } from 'react-router-dom';
const YourFunctionName = () =>{
    const history = useHistory();
    const redirect = (myKey) =>{
        history.push('/another_page/${myKey}`);
     }
     return(
         <Table.Row
      key={myKey}
      onClick={() => redirect(myKey)}>
      {emptyFirstHeader && (
        <Table.Cell>
          <Image
           stc={blabla}
          />
        </Table.Cell>
      ...
     <Table.Row>
   )
}