React router warning: Received `true` for a non-boolean attribute `exact`

5
votes

I receive console warning during Buttons mapping with prop "exact":

Warning: Received true for a non-boolean attribute exact.

If you want to write it to the DOM, pass a string instead: exact="true" or exact={value.toString()}.

I guess there are no mistakes in my code

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;
4
javascriptreactjsreact-router
The error message is clear enough and explains how to fix issue: Attribute value is expected to be String. So you have to pass string, not boolean. – hindmost
@hindmost when I pass exact: 'true' I receive Warning: Failed prop type: Invalid prop exact of type string supplied to Route, expected boolean. – Illia Voloshchuk

4 Answers

2
votes

Fixed it with template literal: 

const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={`${exact}`}
      >
        {name}
      </Button>
0
votes
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>
)
0
votes

Add default as a false, it's making sure that exact is not undefined or null when it is not set/present in your 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
votes

The real problem is that exact has nothing to do with <Button>. It's used for matching the URL (e.g., to highlight a NavLink when appropriate), whereas the <Button> is simply pointing to a location.

Your fix works, but it just adds an attribute that is never used. Instead, remove the line with exact.

const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={`${exact}`}                <--- doesn't do anything
        someOtherUnusedAttribute={true}   <--- same problem
      >
        {name}
      </Button>