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.

Shubham Khatri · Accepted Answer · 2020-05-08 06:25:50Z

2

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

edited May 8, 2020 at 6:25

answered May 8, 2020 at 5:52

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

vishnkr Over a year ago

I removed Router from navbar and i am still getting the same problem. Even if i type the url localhost:3000/login or /signup i am not getting their respective components(which is just h2 text). Is there something else I am doing wrong?

Shubham Khatri Over a year ago

which version react-router are you using

vishnkr Over a year ago

I'm using react-router-dom version 5.1.2

Shubham Khatri Over a year ago

I added a working demo. The navigation by changing url will need you to configure historyApiFallback in webpack. PLease look at this post: stackoverflow.com/questions/40332753/…

vishnkr Over a year ago

I followed your code and i am getting the same output as yours when i remove my navbar.css file import. I have added that to the demo, could you take a look and let me know what my css file is doing wrong?

|

maten · Accepted Answer · 2020-05-08 06:19:15Z

-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;

answered May 8, 2020 at 6:19

maten

5966 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related