Реагирует предупреждение маршрутизатора: получено `true` для не-булева атрибута` точный` - PullRequest
0 голосов
/ 03 мая 2019

Я получаю предупреждение консоли во время отображения кнопок с помощью «точного»:

Предупреждение: получено true для не-логического атрибута exact.

Если вы хотитечтобы записать его в DOM, передайте вместо него строку: точное = "истинное" или точное = {значение.toString ()}.

Я думаю, в моем коде нет ошибок

const TOP_LEVEL_ROUTES = [
  {
    name: 'Home',
    path: HOME_URL,
    component: HomeView,
    exact: true
  },
  {
    name: 'Table',
    path: TABLE_URL,
    component: TableView
  },
  {
    name: 'About',
    path: ABOUT_URL,
    component: AboutView
  }
];
import React from 'react';
import { Link } from 'react-router-dom';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';

import { LOGO_URL, HOME_URL, TOP_LEVEL_ROUTES } from 'consts';
import styles from './Header.scss';

const Header = () => {
  const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={exact}
      >
        {name}
      </Button>
    ));

  return (
    <AppBar className={styles.header}>
      <Toolbar className={styles.headerToolbar}>
        <Link to={HOME_URL}>
          <img
            src={LOGO_URL}
            alt='FCIT logo'
          />
        </Link>
        <nav className={styles.headerNavbar}>
          {navigationList}
        </nav>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

Ответы [ 3 ]

0 голосов
/ 03 мая 2019

Добавьте значение по умолчанию как false, убедитесь, что exact не равно undefined или null, когда оно не установлено / не присутствует в вашем TOP_LEVEL_ROUTES.

 const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact = false, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={exact}
      >
        {name}
      </Button>
    ));

0 голосов
/ 03 мая 2019

Исправлено с литералом шаблона:

const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={`${exact}`}
      >
        {name}
      </Button>
0 голосов
/ 03 мая 2019
export const Button = styled.button`
    cursor: pointer;
    text-transform: uppercase;
    padding: 10px;
    display: inline-block;
    min-width: 12rem;`enter code here`
    text-align: center;

    ${props => (props.secondary ?
        `border: none;
        color: gray;` :
        standardBorder
    )}
`

export const LinkButton = props => (
    <Button {...props}>
        <Link to={props.to} href={props.to}>{props.children}</Link>
    </Button>
)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...