react-router-dom失败的道具类型：类型为“字符串”的无效道具“精确”

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'));

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

  

警告：道具类型失败：exact类型的道具string无效   提供给Route，预期boolean。       在Route中（位于src / index.tsx：19）index.js：1452

根据文本逻辑，上一个警告后的以下警告绝对正确

  

警告：收到true的非布尔属性exact。

     

如果要将其写入DOM，请改为传递一个字符串：   精确=“ true”或精确= {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）

您能帮我解决这个问题吗？ Tnx！

所描述的示例位于开源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}属性。它可以解决您的问题。您不必删除完全相同的内容。

Answer 4

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

Answer 5

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

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

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

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

它对我有用。