Предотвратить дефолт компонента <Link>в React

Question

Как мне предотвратить default (event.preventDefault ()) компонента Link в React, если определенное состояние изменяется, например, если this.state.isActive имеет значение false, когда я щелкаю ссылку, ничего не происходит. См. Код ниже:

`import { Link } from 'react-router';

  return (
     <div>
       {<Link to={link}>
           <img src={someImageUrl} alt={someImageName} />
       </Link>}
     </div>
);`

Я использую React версии 6.

Answer 1

Просто укажите функцию onClick для Link Да, это возможно

import { Link } from 'react-router';

 const isActive = false;

 customFunction(){
   if(isActive){
    this.prop.history.push(link)
  }
 }

  return (
     <div>
       {<Link onClick={customFunction}>
           <img src={someImageUrl} alt={someImageName} />
       </Link>}
     </div>
);

Answer 2

Если вы вообще не хотите, чтобы он вел себя как ссылка, вы можете условно отобразить его как ссылку или промежуток. Например:

{this.state.isActive ? (<Link to={link}>...</Link>):(<span>...</span>)}

В качестве альтернативы, если вы не против иметь ссылку, которая нигде не go, вы можете сделать:

<Link to={this.state.isActive ? link : '#'}>...</Link>

Answer 3

Вы можете передать функцию onClick элементу, заключенному внутри тега <Link />:

import { Link } from 'react-router';

  const prevent = e => {
      e.preventDefault()
      e.stopPropagation()
      // do whatever
  }

  return (
     <div>
       {<Link to={link}>
           <img src={someImageUrl} alt={someImageName} onClick={prevent}/>
       </Link>}
     </div>
);

РЕДАКТИРОВАТЬ: Я неправильно понял вопрос

Вот настоящее решение:

import { Link } from 'react-router';

  const link = isActive ? "/somePath" : null

  return (
     <div>
       {<Link to={link}>
           <img src={someImageUrl} alt={someImageName} />
       </Link>}
     </div>
);