React Page won't load unless refresh

user_18801520 0
Viewed 867

I am trying to implement a dynamic route from my app.js. I have 2 pages. HomePage.js and ReportPageLayout.js.

When I try to navigate from HomePage to ReportPage, I am getting a status= cancelled. Image of Network tab

When i refresh the page in the browser, the data is fetched and rendered.Image status=200 and component rendered on dom

Here is my app.js file

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Homepage from './pages/Homepage';
import ReportPage from './pages/ReportPageLayout';

export default function App() {
    return (
        <div className="App">
            <Router>
                <Switch>
                    <Route exact path="/" component={Homepage} />
                    <Route path="/:id" component={ReportPage} />
                </Switch>
            </Router>
        </div>
    );
}

Please help. Thank you in advance.

react-router-dom reactjs
1 Answers

As far as I know (not that much), in router-dom v5 you should nest the target component and not as an argument

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Homepage from './pages/Homepage';
import ReportPage from './pages/ReportPageLayout';

export default function App() {
   return (
      <Fragment>
         <Switch>
            <Route exact path="/">
              <Homepage/>
            </Route>
            <Route path="/:id">
                <ReportPage/>
            </Route>
         </Switch>
      </Fragment>
   );
}

Furthermore, if you use suspense or importing data from, you should always create a fallback. I had the same thing here Delay in loading the array crushs the app

user_177315230
Related