ReactJS router doesn't load components unless I refresh the page

Question

ReactJS router doesn't load the component in different route unless I refresh , even though I've created a different project with same installations and It does work properly, but in my current project it doesn't.

App.js

import React, {Component} from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import Navigation from './components/Navigation'
import Home from './components/Home'
import Blogs from './components/Blogs'
import Footer from './components/Footer'
import Services from './components/Services'

class App extends Component {
  render(){
  return (
    <BrowserRouter>
      <div className='grid-container'>
          <Navigation />
            <div className='content'>  
                <Route path='/blogs' component={Blogs} />
                <Route path='/' component={Home}  exact/>
                <Route path='/' component={Services}/>
            </div>
            <Footer />
          </div>
    </BrowserRouter>
  );
}
}

export default App;

Home.js

import React from 'react';
import {Link, BrowserRouter} from 'react-router-dom'

const Home = () => {
    return (
        <BrowserRouter>
            <section className="carousel-section-wrapper home">
                    <div className="carousel-inner">
                        <div className="carousel-section carousel-item active clip-bg pt-225 pb-200 img-bg">
                            <div className="container">
                                <div className="row">
                                    <div className="col-xl-8 col-lg-10 mx-auto">
                                        <div className="carousel-content text-center">
                                            <div className="section-title">
                                                <h2>test content</h2>
                                                <p className="text-white">test content</p>
                                            </div>
                                            <Link to="/blogs" className="theme-btn">Read My Blogs</Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </section>
        </BrowserRouter>

    )
}

export default Home

Blogs.js

    import React from 'react';
    
    const Blogs = () => {
        return (
            <h1>Blogs</h1>
            
        )
    }

export default Blogs

Expected result: componetns home and services disappear, and blogs component appear when I click to any button redirects to /blogs

Actual result: the state of the page stays the same unless I refresh the browser

your help would be appreciated.

Answer 1

You've used BrowserRouter in nested components, in your App and Home components and it won't work this way. To fix this, you only must have the BrowserRouter in the App component.