javascript - React 路由器警告:收到非布尔属性“exact”的“true”
问题描述
我在使用道具“精确”映射按钮期间收到控制台警告:
警告:收到
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;
解决方案
用模板文字修复它:
const navigationList = TOP_LEVEL_ROUTES
.map(({ exact, path, name }) => (
<Button
component={Link}
to={path}
key={path}
exact={`${exact}`}
>
{name}
</Button>
推荐阅读
- react-native - 安装第二个依赖项后的 UNMET 对等依赖项
- msbuild - Autofac 和 Microsoft.Bcl.AsyncInterfaces
- flutter - Flutter 和 HyperPay 的支付之旅
- r - 创建循环以运行统计测试
- python - 在 Keras/Tensorflow(在 Pycharm 中)中调试自定义指标函数?
- php - 是否可以在没有 php-fpm (FastCGI) 的情况下通过 NGINX 服务 php?
- android - 谷歌登录不起作用。Activity.RESULT_CANCELED 一直返回
- r - 汇总返回不同的值
- sql-server - 开始使用 PowerShell 按存储然后通道生成存储寄存器组的格式化报告时遇到问题
- python - Scrapy FormRequest 在 Python Requests 工作时返回 400 错误