Блог

Пытаюсь добавить a к существующему компоненту React, но сталкиваюсь с некоторыми трудностями. Учитывая следующий код

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

require('./NavBar.scss');

class NavBar extends React.Component {

  authButton() {
    console.log(Link)
    const route = this.props.currentUser ? 'logout' : 'login';
    return <Link to={ `/${route}` }>route</Link>
  }

  

Компоненту navbar не удается выполнить рендеринг, и я получаю эту ошибку

 Uncaught TypeError: Object(...) is not a function
    at eval (react-router-dom.js:198)
  

Если я изменю параметр «to» на функцию, подобную этой

 return <Link to={ () => return `/${route}` }>route</Link>
  

компонент действительно выполняет рендеринг, но я получаю это сообщение «checkPropTypes.js:19 Предупреждение: сбойный тип реквизита: неверный реквизит, to предоставленный Link «.

Любая идея о том, что может быть причиной этого. Использовал этот компонент в той же версии react-router-dom (5.0.0) в других проектах без проблем.

Попробуйте использовать его с withRoute из react-router-dom. В нижней части файла, экспортируйте навигационную панель по умолчанию, напишите эту строку

export default withRoute(navbar)

Не забудьте импортировать его из react-router-dom.

Обычно возникает проблема с react-router-dom, когда компонент не включен в Route элемент в «главном компоненте», такой App.js .

<Route path='/' component={}

Что-то вроде этого.

Я предполагаю это, поскольку многие люди сталкиваются с этой проблемой с React-router-dom.