如何解决「为非布尔属性exact传入true」的React警告？

一、先修正组件Props的接收错误 #

你的Main组件参数写法完全错误，React组件的props是一个单一对象，不是拆分的独立参数，这会导致你无法正确获取navigation属性，进而引发逻辑异常。

正确写法（解构props）：

const Main = ({ header, navigation }) => {
  return (
    <>
      <div>
        {navigation !== false && <Navigation />}
      </div>
    </>
  )
}

或者不使用解构，直接通过props对象访问：

const Main = (props) => {
  return (
    <>
      <div>
        {props.navigation !== false && <Navigation />}
      </div>
    </>
  )
}

二、处理exact属性警告 #

这个警告通常和React Router的<Route>组件有关：

• 确保传递exact时用布尔值，比如<Route exact path="/" component={Home} /> 或者 <Route exact={true} path="/" component={Home} />
• 绝对不要写成字符串形式（比如exact="true"），这会被识别为非布尔属性触发警告

三、验证navigation属性传递 #

修正组件后，测试你的几种传递方式：

• <Main navigation>：等价于navigation={true}，此时会渲染Navigation组件
• <Main navigation={false}>：不会渲染Navigation组件
• 不传递navigation：navigation为undefined，因undefined !== false，会渲染组件（如果需要不传递时不渲染，可把判断改成{navigation && <Navigation />}）

内容的提问来源于stack exchange，提问作者Skuy Living