Reaction-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,в маршруте (в src / index.tsx: 19) index.js: 1452

И следующее предупреждение после предыдущей единицы абсолютно соответствует текстовой логике

Предупреждение:Получено true для небулева атрибута exact.

Если вы хотите записать его в DOM, вместо этого передайте строку: correct = "true" или точный = {value.toString ()},в (создан Context.Consumer) в Link (в App.tsx: 25) в заголовке (в App.tsx: 11) в div (в App.tsx: 10) в App (создан Context.Consumer) в Route(в src / index.tsx: 19) в Switch (в src / index.tsx: 18) в Router (создан BrowserRouter) в BrowserRouter (в src / index.tsx: 17) в Router (создан ConnectedRouter) в ConnectedRouter(в src / index.tsx: 16) в провайдере (в src / index.tsx: 15)

Не могли бы вы помочь мне решить эту проблему.Tnx!

описанный пример находится здесь в opensource prj https://github.com/gyerts/react/blob/master/starters/typescript-scss-redux/src/index.tsx#L19

Answer 1

Проблема заключалась в том, что по какой-то причине я передаю атрибут exact компоненту Link.

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

Поэтому я удалил атрибут exact, и предупреждение исчезло.

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

Answer 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}.это может решить вашу проблему.Вам не нужно точно удалять.

Answer 3

Вы можете использовать только атрибут exact без его значения, например:

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