response-router-dom Причины перенаправления: превышена максимальная глубина обновления

Question

Я пытаюсь перенаправить с корневого URL моего приложения, и я получаю вышеуказанную ошибку. Я прочитал некоторые другие ответы здесь на SO, которые ссылаются на эту ошибку, но они сосредоточены на обновлении состояния циклически, и я не вижу, где я делаю это в маршрутизаторе:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'
import BookDetails from './BookDetails'
import NavBar from './NavBar'
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <>
        <Router>
        <NavBar/>
        <Switch>
            <Redirect from="/" to="/search" component={App} /> {/** */}
            <Route path="/search" component={App} />
            <Route path="/" component={App} /> 
        </Switch>
            <Route path="/book/:bookId" component={BookDetails} />

        </Router>
    </>
    , document.getElementById('root'));

Или в файле App.js, который я надеюсь в порядке:

import React, {useState, useEffect} from 'react'
import {Link} from 'react-router-dom'
// import debounce from 'lodash'
import noimage from './noimage.png'
import axios from 'axios'
import './App.css';

const App = (props) =>{

  const [books,setBooks] = useState([])
  const [isLoading,setIsLoading] = useState(false)
  const [hasError,setHasError] = useState(false)
  const [searchTerm,setSearchTerm] = useState('')
  console.log("props",(props.history.location.pathname))
  const input = str => {
    console.log(str)
    setSearchTerm(str)
    getData(str)
  }

  const getData = async () => {
    if(searchTerm && searchTerm.length >= 2){
      if(isLoading === false)setIsLoading(true)
      let s = `http://localhost:7000/books/search/${searchTerm}`
      await axios.get(s)
      .then(resp => {
        console.log(resp.data.books)
        if(books === [])setBooks([...resp.data.books])
        //props.history.push(s)
      })
      .catch(error => {
        console.log(error)
        setHasError(true)
        setIsLoading(false)
      })
    }
    if(isLoading === true) setIsLoading(false)
  }

  const img = {
    height : "175px",
    width : "175px"
  }

  // useEffect(() =>{
  //     setTimeout(() => getData(),2250)
  // },[])



  return isLoading ? (
    <div className="App">
      <div className="spinner"></div>
      <div className="App loading">
        <p><i>loading...</i></p>
      </div>
    </div>
  )
  : hasError ? (
    <div className="App loading-error">
      &#x26A0; There is a network issue: Please try again later
    </div>
  )
  :
  (
    <div className="App">
      <div className="search">
        <div className="container">
          <div className="content">
              <input
                type="search"
                placeholder="Search..."
                aria-label="Search"
                className="search-form"
                value={searchTerm}
                onChange={e => input(e.target.value)}
              />
          </div>
        </div>
      </div>

    {
      (books && books.length >= 1) && 
        books.map((b,i) => {
        console.log(typeof b.imageLinks)
        return (
          <div key={`${b.title}-${i}`} className="search-book">
            <Link to={`/book/${b.id}`}>
              {
                (b.imageLinks === undefined || b === undefined || b.imageLinks.thumbnail ===  undefined) ?
                  <img src={noimage} alt ="Missing" style={img}></img>
              :
                  <img src={b.imageLinks.thumbnail} alt={b.title}></img>
              }
            </Link>
            <p>{b.title}</p>
            <hr/>
          </div>
        )}
      )
    }         
    </div>
  )  
}

export default App;

Я не могу продемонстрировать код, так как он включает сервер REST Api, который является локальным для моей машины. Спасибо.

Answer 1

 <>
    <Router>
    <NavBar/>
    <Switch>
        <Redirect  from="/" to="/search" component={App} /> {/** */}
        <Route exact path="/search" component={App} />
        <Route exact path="/book/:bookId" component={BookDetails} />
    </Switch>
    </Router>
</>

попробуй так, может тебе поможет

Answer 2

Ну, мой инструктор предложил это: https://reacttraining.com/react-router/web/api/Switch и я подумал Я уже пробовал это , но я прочитал документы и попробовал это -

    (
        <Router>
            <NavBar/>
            <Switch>
                <Redirect exact from="/" to="/search" component={App} />
                <Route path="/search" component={App} />
                <Route path="/book/:bookId" component={BookDetails} />
            </Switch>
        </Router>
    )

Свойство exact не требуется на всех маршрутах. Но я благодарю Кишана за его усилия, он определенно был на правильном пути. Еще раз спасибо.