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

Question

I met some strange warning when I try to use <Route /> component. Please pay your attention into a line <Route exact={"true"} .../> which makes strange browser warnings described beneath code sample.

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

Browser console says me next:

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

And the following warning after prev one is absolutely apposite by text logic

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)

Could you please help me with this issue. Tnx!

described example are located here in opensource prj https://github.com/gyerts/react/blob/master/starters/typescript-scss-redux/src/index.tsx#L19

Answer 1

The issue was that for some reason I pass attribute exact to a Link component.

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

So I removed exact attribute and warning is gone.

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

Answer 2

You can use exact. You don't have to remove it.

Just like this:

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

You can pass true to it. it can solve your problem. You don't have to remove exact.

Answer 3

You can use just exact attribute without its value like this:

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

Answer 4

you can try, exact={true}. It worked for me.

Answer 5

You can also give it a boolean value like mentioned below:

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

Or without any value as when you just write attribute, considered as true (default value is true)

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

it worked for me.