score:2

Accepted answer

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

score:-1

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;

Related Query

More Query from same tag