React Router not loading page Until Refresh The page

Question

Hi This is Tanbhir Hossain, I am trying to Convert HTML Templates to react js. The problem is in React Router.

When i Click any the Page only show the Preloading Until manually Refresh the page. When Refresh the page it's show finely . Now I want to get rid of this problem

here is my RouterPage.js

import React, { Component } from 'react';
import {BrowserRouter  as Router, Routes, Route} from 'react-router-dom'
import Home from './Home';
import About from './About';
import Contact from './Contact';

class RouterPage extends Component {
    render() {
        return (
            <div>
                <Router>
                    <Routes>
                        <Route  path='/' element={< Home />} />
                        <Route  path='/about' element={< About />}/>
                        <Route  path='/contact' element={< Contact />}/>
                    </Routes>
                </Router>
            </div>
        );
    }
}

export default RouterPage;

Here is my Link

 <Link  to={'/about' } data-toggle="dropdown" className="dropdown-toggle nav__item-link">About Us</Link>

When I click This Link Preloading is Loading unlimited time

When i manually refresh the page it's working finely

Answer 1

I was faced with this challenge too. I solved it by replacing <React.StricMode> with <BrowserRouter> tag in index.js.

// index.js should look something like this

import {BrowserRouter} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

NOTE: Adding tag in App.js to wrap all your components is not the same as above.

Similar Issue here