react-router-dom 失败的道具类型:无效的道具`exact`类型为`string`
Posted
技术标签:
【中文标题】react-router-dom 失败的道具类型:无效的道具`exact`类型为`string`【英文标题】:react-router-dom Failed prop type: Invalid prop `exact` of type `string` 【发布时间】:2019-05-17 01:06:50 【问题描述】:我在尝试使用<Route />
组件时遇到了一些奇怪的警告。请注意<Route exact="true" .../>
行,该行会在代码示例下方显示奇怪的浏览器警告。
ReactDOM.render(
<Provider store=appStore>
<ConnectedRouter store=appStore history=history>
<BrowserRouter>
<Switch>
<Route exact="true" path="/" component=App/>
<Route render=() => <h1>404, not found</h1> />
</Switch>
</BrowserRouter>
</ConnectedRouter>
</Provider>,
document.getElementById('root'));
浏览器控制台说我接下来:
警告:失败的道具类型:无效的道具
exact
类型为string
提供给Route
,预计boolean
。 在 Route (at src/index.tsx:19) index.js:1452
在上一个警告之后的以下警告完全符合文本逻辑
警告:收到
true
的非布尔属性exact
。如果要将其写入 DOM,请改为传递字符串: 精确=“真”或精确=value.toString()。 在一个(由 Context.Consumer 创建) 在链接中(在 App.tsx:25) 在标头中(在 App.tsx:11) 在 div 中(在 App.tsx:10) 在 App 中(由 Context.Consumer 创建) 在路线中(在 src/index.tsx:19) 在 Switch 中(在 src/index.tsx:18) 在路由器中(由 BrowserRouter 创建) 在 BrowserRouter (在 src/index.tsx:17) 在路由器中(由 ConnectedRouter 创建) 在 ConnectedRouter 中(在 src/index.tsx:16) 在提供者中(在 src/index.tsx:15)
你能帮我解决这个问题吗?天呐!
所描述的示例位于开源 prj https://github.com/gyerts/react/blob/master/starters/typescript-scss-redux/src/index.tsx#L19
【问题讨论】:
您是否也将确切的属性传递给 Link 元素? 你使用的是哪个 react 路由器版本?"react-router": "^4.3.1"
, "react-router-dom": "^4.4.0-beta.6"
, "react-router-redux": "^5.0.0-alpha.9"
,
【参考方案1】:
问题在于,出于某种原因,我将属性 exact
传递给了 Link 组件。
<Link exact to="/about">About the author</Link>
所以我删除了exact
属性并且警告消失了。
<Link to="/about">About the author</Link>
【讨论】:
你也应该改变你的路由到这个<Route exact path="/" component=App />
如果没有确切的道具,路由器会认为它是假的。你不必做exact="true"
或exact="false"
只需做exact
或不放。【参考方案2】:
您可以使用精确。您不必删除它。
就像这样:
ReactDOM.render(
<Provider store=appStore>
<ConnectedRouter store=appStore history=history>
<BrowserRouter>
<Switch>
<Route exact=true path="/" component=App/>
<Route render=() => <h1>404, not found</h1> />
</Switch>
</BrowserRouter>
</ConnectedRouter>
</Provider>,
document.getElementById('root'));
您可以将true
传递给它。它可以解决您的问题。您不必删除exact
。
【讨论】:
【参考方案3】:您可以只使用 exact
属性而不使用它的值,如下所示:
<Route exact path="/" component=App/>
【讨论】:
无法接受您的回答,因为这告诉我问题Warning: Received
true` 中针对非布尔属性 exact
描述的第二个警告。`
如果<Route exact="true"
这个变种我也试过,但问题出在其他地方。所以你的回答和评论是正确的,但没有解决问题。【参考方案4】:
你可以试试,exact=true。它对我有用。
【讨论】:
【参考方案5】:您也可以给它一个boolean
值,如下所述:
<Route exact=true path="/" component=App/>
或者没有任何值,当你只写属性时,认为是true(默认值为true)
<Route exact path="/" component=App/>
它对我有用。
【讨论】:
以上是关于react-router-dom 失败的道具类型:无效的道具`exact`类型为`string`的主要内容,如果未能解决你的问题,请参考以下文章
使用 react-router-dom 在 Route 中添加组件作为道具
React-Router-DOM 中的 NavLink 组件不接受带有功能的样式道具