React Page won't load unless refresh

Question

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.

I don't see any issue with this code specifically. How are you running your app? — Drew Reese, Apr 15 '22 at 05:11
Oh, there's currently a compatibility issue between `react@18` and `react-router-dom@5`. https://github.com/remix-run/react-router/issues/7870 might have some relevant information for you, though it hasn't updated since I last checked it. — Drew Reese, Apr 15 '22 at 05:12
@Drew Reese Ohh okay!. If i install react-router-dom@6, will it fix the issue? I'll try it. — Sachidananda MG, Apr 15 '22 at 05:15
Yes, https://stackoverflow.com/a/71833424/8690857 may help as well. — Drew Reese, Apr 15 '22 at 05:15
Do you get the same error if you put the ReportPage route before the Homepage route? — Woodchuck, Apr 15 '22 at 05:17
@DrewReese Thanks. I think that the issue is with react v18. — Sachidananda MG, Apr 15 '22 at 05:20
@Woodchuck It's not working if I interchange their positions. — Sachidananda MG, Apr 15 '22 at 05:27

score 1 · Answer 1 · answered Mar 24 '23 at 20:42

for me, the following updation worked,

If you use are using React Router 5.3.x, check whether it is 5.3.3 in your package.json file.

If it is not 5.3.3 uninstall the last version then install the bug-free version which has been resolved by John and updated in version 5.3.3.

npm uninstall -S react-router-dom
npm install -S react-router-dom@5.3.3

score 0 · Answer 2 · answered Apr 15 '22 at 05:37

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

No, RRDv5 has several [rendering methods]. There exists a `component` and `render` and `children` function props, as well as just implicitly rendering `children` components like your answer. — Drew Reese, Apr 15 '22 at 06:01

React Page won't load unless refresh

2 Answers2