0

I am using React Router for client-side routing in my web application, but I am experiencing an issue where I have to reload the page every time I navigate to a new route.

I have verified that the correct components are being rendered and that the URL is updating correctly, but the page still needs to be reloaded for the changes to take effect. How can I fix this issue?

App.js

import './App.css';
import React, { Component } from 'react'
import NavBar from './components/NavBar';
import News from './components/News';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";

export default class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <NavBar />
          <Switch>
            <Route exact path="/">
              <News key="general" pageSize='15' country='us' category='general' />
            </Route>
            <Route exact path="/Business">
              <News key="business" pageSize='15' country='us' category='business' />
            </Route>
            <Route exact path="/Entertainment">
              <News key="entertainment" pageSize='15' country='us' category='entertainment' />
            </Route>
            <Route exact path="/Health">
              <News key="health" pageSize='15' country='us' category='health' />
            </Route>
            <Route exact path="/Science">
              <News key="science" pageSize='15' country='us' category='science' />
            </Route>
            <Route exact path="/Sports">
              <News key="sports" pageSize='15' country='us' category='sports' />
            </Route>
            <Route exact path="/Technology">
              <News key="technology" pageSize='15' country='us' category='technology' />
            </Route>
          </Switch>
        </Router>
      </div>
    )
  }
}

navbar.js

import React from 'react'
import { Link } from 'react-router-dom'

export default function NavBar() {
  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">NewsMonkey</Link>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Link className="nav-link" aria-current="page" to="/">Home</Link>
              </li>
              <li className="nav-item"><Link className="nav-link" to="/business">Business</Link></li>
              <li className="nav-item"><Link className="nav-link" to="/entertainment">Entertainment</Link></li>
              <li className="nav-item"><Link className="nav-link" to="/general">General</Link></li>
              <li className="nav-item"><Link className="nav-link" to="/health">Health</Link></li>
              <li className="nav-item"><Link className="nav-link" to="/science">Science</Link></li>
              <li className="nav-item"><Link className="nav-link" to="/sports">Sports</Link></li>
              <li className="nav-item"><Link className="nav-link" to="/technology">Technology</Link></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  )
}
halfer
  • 19,824
  • 17
  • 99
  • 186
Divyam
  • 43
  • 10
  • What needs to be reloaded? In other words, what does reloading the page do for you? – Drew Reese Jan 13 '23 at 17:57
  • whenever I click on navbar item , my site should get reloaded – Divyam Jan 13 '23 at 17:58
  • Yes, but *what exactly* needs to be reloaded? Is this `News` needing to refetch some data? Can you [edit] the post to include all relevant code you are having an issue working with as part of a complete [mcve]. – Drew Reese Jan 13 '23 at 18:00
  • instead of having to load all of the content for your entire application on a single page, only the content for the current route needs to be loaded. – Divyam Jan 13 '23 at 18:03
  • It just occurred to me with the symptoms you describe of an older RRDv5 issue and React 18 and the `React.StrictMode` component. What ***specific*** versions of `react` and `react-router-dom` are you using? You can check what is installed by running `npm list react react-router react-router-dom` from the project's root directory and report back, and verify if you are rendering your app into a `StrictMode` component? Can you share the `index.js` file where you are rendering the app into the DOM? – Drew Reese Jan 13 '23 at 18:18

0 Answers0