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

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

• javascript
• html
• reactjs
• router

Share Improve this question Follow asked Apr 12, 2022 at 7:00 TANBHIR HOSSAIN Spring 21TANBHIR HOSSAIN Spring 21 4911 silver badge88 bronze badges 2

• Make sure the <Link Component you have is the one from react-router, – P-A Commented Apr 12, 2022 at 9:10
• 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 Commented Apr 12, 2022 at 9:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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 ponents is not the same as above.

Similar Issue here

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

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 pletely 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 ment out the preloader part which looks something like below, just ment it out.

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

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

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

Run these mands in your powershell to reinstall reactrouter packages

npm install react-router-dom

or

yarn add react-router-dom