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

I think the problem is in your about page, not the way you have setup the routing otherwise the preloading wouldn't show up at all — P-A, Apr 12 '22 at 09:51

score 4 · Answer 1 · answered Sep 22 '22 at 14:47

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

score 0 · Answer 2 · answered Apr 12 '22 at 07:10

0

remove the to={'/about} to the to='/about' i hope the issue will be solved

answered Apr 12 '22 at 07:10

shoaibzaak

25
3

Changed But Same Problem ............... – TANBHIR HOSSAIN Spring 21 Apr 12 '22 at 07:17
can you share the other code snippets files with me where your loading circle lies – shoaibzaak Apr 13 '22 at 14:38

score 0 · Answer 3 · answered Jul 30 '22 at 22:15

Hopefully you're using template which was created using jquery for those templates usually puts a .preloader class for the div element to be shown when the page is loading

jquery fades out the preloader page when the page have completely downloaded its assets i.e images,css files etc.

But react and especially react-router-dom doesnt follow the same exactly same procedures. it have its own life cycle

a hint is to go to your template html file and comment out the preloader part which looks something like below, just comment it out.

<div className="preloader">
    ....
</div>

2. you may choose to play with it, by having react lifecycle methods manipulates show/hide effects

score 0 · Answer 4 · answered Jan 05 '23 at 17:16

0

I was having the same issue so I reinstalled the react-router-dom package and my problem got fixed

Run these commands in your powershell to reinstall reactrouter packages

npm install react-router-dom

or

yarn add react-router-dom

answered Jan 05 '23 at 17:16

Divyam

43
10

React Router not loading page Until Refresh The page

4 Answers4

Linked