react-router-dom 失败的道具类型：无效的道具`exact`类型为`string`答案

【问题标题】：react-router-dom Failed prop type: Invalid prop `exact` of type `string`react-router-dom 失败的道具类型：无效的道具`exact`类型为`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",

标签： reactjs react-router-dom

【解决方案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}/>

它对我有用。

【讨论】：