React Router not loading page Until Refresh The page

user_16843174 0
Viewed 967

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 enter image description here

When i manually refresh the page it's working finely enter image description here

reactjs router html javascript
3 Answers

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

user_174364380

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

user_23508080

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

user_122055420
Related