React 路由器警告：收到非布尔属性“exact”的“true”

Question

我在使用“精确”属性进行按钮映射期间收到控制台警告：

警告：收到 true 非布尔属性 exact 。

如果您想将其写入 DOM，请改为传递一个字符串：exact=“true” 或 exact={value.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;

原文由 Illia Voloshchuk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

用模板文字修复它：

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

原文由 Illia Voloshchuk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

就我而言，是 exact="true" 解决了这个问题。

原文由 Hadis Sulejmani 发布，翻译遵循 CC BY-SA 4.0 许可协议