react-router-dom not rendering components on url change

Question

If I click on a navigation link, I can see that the slug has changed but the component is not rendering. I have to manually refresh the page in order to see the component, while the page should re-render by itself on route/slug change.

index.js

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.

App.js

import Header from "./MyComponents/Header";
import { LogIn } from "./MyComponents/LogIn";
import { Footer } from "./MyComponents/Footer";
import { About } from "./MyComponents/About";
import { Control } from "./MyComponents/Control";
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import ReactDOM from 'react-dom/client';

function App() {
  return (
    <>
      <Router>
        <Header title="Indoor Farming" searchBar={false} />
        <Switch>
          <Route path="/" component={LogIn} />
          <Route exact path="/about" component={About} />
        </Switch>
        <Footer />
      </Router>

    </>
  )
}

export default App;

Header.js

import React from 'react'
import PropTypes from 'prop-types'
import { Link } from "react-router-dom";

export default function Header(props) {

  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="container-fluid">
        <Link className="navbar-brand" to="/">{props.title}</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 active" aria-current="page" to="/">Home</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link active" to="/about" >About</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/control">Control</Link>
            </li>
          </ul>
          {props.searchBar ? <form className="d-flex">
            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
            <button className="btn btn-outline-success" type="submit">Search</button>
          </form> : ""}
        </div>
      </div>
    </nav>
  )
}

Header.defaultProps = {
  title: "Your Title Here",
  searchBar: true
}

Header.propTypes = {
  title: PropTypes.string,
  searchBar: PropTypes.bool.isRequired
}

On clicking the link, the url changes but to change the view in the browser I have to click the refresh button. How do I solve this ??

react-router-dom not rendering components on url change

0 Answers0