URL changes but component is not render - React Router

I'm new in react/react-router.

App.js file:

 import React , {useState , useEffect} from 'react'; 
 import './App.css'; 
 import {Route, Switch} from 'react-router-dom'; 
 import Header from './components/ui/Header'; 
 import axios from 'axios';
 import CharacterGrid from './components/characters/characterGrid';
 import Search from './components/ui/Search'; 
 import QuotesFetch from './Quotes/QuotesFetch'; 
 import Quotes from './Quotes/Quotes';


  return (

    <div className="container">
      <Header />
      <Switch>
      <Route path="/">
          <Search getQuery={(q) => setQuery(q)} />
          <CharacterGrid
            item={item}
            isLoading={isLoading}
          />
          
        </Route>
        <Route path="/characters">
          <Search getQuery={(q) => setQuery(q)} />
          <CharacterGrid
            item={item}
            isLoading={isLoading}
          />
        </Route>
          
        <Route path="/quotes">
        <Quotes />
        </Route>

          <Route path="/series">
            
          </Route>
        </Switch>
      
    </div>   ); }

export default App;

index.js file:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import {   BrowserRouter } from "react-router-dom";
    
    ReactDOM.render(   <BrowserRouter> 
        <App />   </BrowserRouter>      ,   document.getElementById('root') );
    
    

QoutesFetch.js file:

import React , { useState , useEffect} from 'react'; 
import Quotes from './Quotes'; 
import axios from 'axios'; 
import Spinner from '../img/spinner.gif';
    
    const QuotesFetch = (props) => {
        const [quote , setQuotes] = useState([]);
        const [isLoading , setIsLoading] = useState(true);
    
    
      useEffect(() => {
        const url =
          `https://www.breakingbadapi.com/api/quotes`;
    
        axios
          .get(url)
          .then((res) => {
            setQuotes(res.data);
            setIsLoading(false);
          })
          .catch((err) => console.log("QuotesList Error=>", err));   }, []);
        
        return isLoading ? (<img style={{width: '200px' , margin: 'auto' , display: 'block'}} src= {Spinner} />) : 
        (
        <section>
            {quote.map((quote) => (
            <Quotes key={quote.quote_id} quote={quote} />
          ))}
        </section>
        ) }
    
        export default QuotesFetch