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

Question

我在尝试使用 <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'));

浏览器控制台接下来说我：

Warning: Failed prop type: Invalid prop exact of type string supplied to Route, expected boolean. in Route (at src/index.tsx:19) index.js:1452

并且在上一个警告之后的以下警告完全符合文本逻辑

Warning: Received true for a non-boolean attribute exact.

If you want to write it to the DOM, pass a string instead: exact="true" or exact={value.toString()}. in a (created by Context.Consumer) in Link (at App.tsx:25) in header (at App.tsx:11) in div (at App.tsx:10) in App (created by Context.Consumer) in Route (at src/index.tsx:19) in Switch (at src/index.tsx:18) in Router (created by BrowserRouter) in BrowserRouter (at src/index.tsx:17) in Router (created by ConnectedRouter) in ConnectedRouter (at src/index.tsx:16) in Provider (at src/index.tsx:15)

你能帮我解决这个问题吗？谢谢！

描述的示例位于开源 prj https://github.com/gyerts/react/blob/master/starters/typescript-scss-redux/src/index.tsx#L19

中

Answer 1

您可以仅使用 exact 属性而不使用其值，如下所示：

<Route exact path="/" component={App}/>

Answer 2

问题是出于某种原因我将属性 exact 传递给 Link 组件。

<Link exact to="/about">About the author</Link>

所以我删除了 exact 属性，警告消失了。

<Link to="/about">About the author</Link>

Answer 3

你可以使用精确的。您不必删除它。

就像这样：

 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.

Answer 4

您还可以给它一个 boolean 值，如下所述：

<Route exact={true} path="/" component={App}/>

或者没有任何值就像你只写属性一样，被认为是真的（默认值是真的）

<Route exact path="/" component={App}/>

对我有用。

Answer 5

你可以试试，exact={true}。它对我有用。

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

react-router-dom Failed prop type: Invalid prop `exact` of type `string`

reactjs

react-router-dom