1

The url is updated whenever a link in the navbar is clicked, but the components relating to specific end-points are not rendered on the browser.

So for example, when the Profile button is clicked, the url is changed to the "/profile", but the profile component is never displayed.

I've included NavBar and App file code snippets. I need assistance determining what is causing the problem and resolving it.

NavBar.js

import React from "react";
import { Link } from "react-router-dom";

const NavBar = () => {
  return (
    <nav>
      <div className="nav-wrapper white">
        <Link to="/" className="brand-logo left">Instagram</Link>
        <ul id="nav-mobile" className="right hide-on-med-and-down">
          <li><Link to="/signin">Signin</Link></li>
          <li><Link to="/signup">Signup</Link></li>
          <li><Link to="/profile">Profile</Link></li>
        </ul>
      </div>
    </nav>
  )
}

export default NavBar;

App.js

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import './App.css';
import NavBar from "./components/Navbar"
import Home from './components/screens/Home';
import Signup from './components/screens/Signup';
import Profile from './components/screens/Profile';
import Login from './components/screens/Login';

function App() {
  return (
    <BrowserRouter>
      <NavBar />
      <Route exact path="/" component={Home} />
      <Route path="/signin" component={Login} />
      <Route path="/signup" component={Signup} />
      <Route path="/profile" component={Profile} />
    </BrowserRouter>
  );
}

export default App;

Currently output:

enter image description here

Expected output:

enter image description here

---EDIT---

My main concern is that when I click the button, the url changes but the content is not rendered. When I refresh the url, the new component is rendered.

video demo

react-router-dom version: 5.1.2

Each component Home, Login, Signup, and Profile display the respective component name in h1.

Home.js

import React from "react";

const Home = () =>{
    return(
        <h1>home</h1>
    )
}

export default Home

Profile.js

import React from "react";

const Profile = () =>{
    return(
        <h1>Profile</h1>
    )
}

export default Profile
Apurv Kulkarni
  • 21
  • 4
  • It seems to work when I run it – CStudent Jun 22 '23 at 13:26
  • 1
    Can you please add the Home and Profile component codes? My assumption: you have `home` HTML content in the profile component. So it's working fine, your HTML content is incorrect – Tushar Gupta Jun 22 '23 at 13:26
  • I don't see any overt issues in the code you've shared. What version of `react-router-dom` is installed and used? Can you [edit] to also include the `Home`, `Login`, `Signup`, and `Profile` components so we can see what they are doing? – Drew Reese Jun 22 '23 at 15:21
  • I was only able to reproduce the issue you describe while using `react-router-dom@5.1.2` and `react@18` and rendering the app into the `React.StrictMode` component. The code works with `react@17`. Follow the suggestions in the duplicate – Drew Reese Jun 23 '23 at 06:54

0 Answers0