Reactjs - changing url using react router but the component does not change

Question

I want to render a navbar with links to login and signup pages, but whenever i click them the url changes as i wanted them to but the respective components are not rendered. Here's my code:

App.js

import React, { Component } from 'react';
import NavBar from './components/NavBar/NavBar';
import {BrowserRouter as Router,Route,withRouter} from "react-router-dom";
import Login from './components/Login';
import SignUp from './components/SignUp';
import Landing from './components/Landing';


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">

          <NavBar />
          <Route exact path="/" component={withRouter(Landing)} />
          <div className="container">
            <Route exact path="/login" component={withRouter(Login)} />
            <Route exact path="/signup" component={withRouter(SignUp)} />
          </div>
        </div>
      </Router>
    );
  }
}
export default App;

NavBar.js

import React,{Component} from "react";
import {BrowserRouter as Router,withRouter,Link} from "react-router-dom";
import './NavBar.css'



class NavBar extends Component {
    render() {
        return (
            <Router>
            <header className='navbar'>
                <nav className='navbar_navigation'>
                    <div />
                    <div className='navbar_logo'>
                        <Link to='/'>Home</Link>
                    </div>
                    <div className='navbar_nav-items'>
                        <ul>
                            <li><Link to="/signup" className="nav-link">Sign up</Link></li>
                            <li><Link to="/login" className="nav-link">Log In</Link></li>
                            <li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
                        </ul>
                    </div>
                </nav>
            </header>
            </Router>
        );
    }
}

export default withRouter(NavBar);

The Landing, Login and Signup are basically components that just render text in h2 for now since I want to see if they render fine. Also when i go to the respective urls directly: /login or /signup, I don't see any change and the navbar is the only thing rendered in those urls as well. I have tried adding switch as well but nothing seems to change.

Answer 1

The issue here is that Navbar component is using a Router on its own and hence the Link components are not able to communicate to the outer Router component which renders the Routes. Make sure you use only one Router component instance.

You Navbar component doesn't need a Router instance

class NavBar extends Component {
    render() {
        return (
            <header className='navbar'>
                <nav className='navbar_navigation'>
                    <div />
                    <div className='navbar_logo'>
                        <Link to='/'>Home</Link>
                    </div>
                    <div className='navbar_nav-items'>
                        <ul>
                            <li><Link to="/signup" className="nav-link">Sign up</Link></li>
                            <li><Link to="/login" className="nav-link">Log In</Link></li>
                            <li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
                        </ul>
                    </div>
                </nav>
            </header>
        );
    }
}

Working demo

Answer 2

If you want to render just one component based on route, you need to use the Switch component from react-router:

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch} from "react-router-dom"


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <NavBar />
            <Switch>
              <Route exact path="/">
                <Page 1 />
              </Route>
              <Route exact path="/login">
                <Page 2 />
              </Route>
              ... etc
            </Switch>
        </div>
      </Router>
    );
  }
}

export default App;