React BrowserRouter only load the NavBar

Question

No error, the code should be right, but I got no result just the navbar is working. I generated the basic app with npx

Code App.js

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

import './App.css';

import NavBar from './components/NavBar';

import Home from './components/Home';
import Pagina2 from './components/Pagina2';
import Pagina3 from './components/Pagina3';
import Pagina4 from './components/Pagina4';
import Pagina5 from './components/Pagina5';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <NavBar>
          <Switch>
            <Route path="/home" component={Home} />
            <Route path="/pagina2" component={Pagina2} />
            <Route path="/pagina3/:parametro1?/:parametro2?" component={Pagina3} />
          </Switch>
        </NavBar>
      </BrowserRouter>
    );
  }
}

export default App;

Navbar.js

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

class NavBar extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li><Link to="/home">Home</Link></li>
                    <li><Link to="/pagina2/">Pagina 2</Link></li>
                    <li><Link to="/pagina3/aaa/bbb">Pagina 3</Link></li>
                </ul>
                <hr />
            </div>
        );

    }
}
export default NavBar;

Home.js

import React, { Component } from 'react';
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myProps: ''
        };
    }
    render() {
        return (
            <>
                <h1>Homepage</h1>
            </>
        );
    }
}

export default Home;

Pagina2.js

import React, { Component } from 'react';

import {NavLink} from 'react-router-dom';

class Pagina2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myProps: ''
        };
    }
    render() {
        return (
            <>
                <h1>Pagina2</h1>
                <NavLink activeStyle={{color:'green'}}
                to={{
                    pathname:'/pagina3/a/b',
                    search:'?nome=aaa&eta=22',
                    hash:'#hash-value',
                    state:{
                        fromPagina2:"Info"
                    }
                }}>Link con parametri</NavLink>
            </>
        );
    }
}
export default Pagina2;

Pagina3.js

import React, { Component } from 'react';

class Pagina3 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            parametro2: props.match.params.parametro2
        };
    }
    render() {
        const queryString = new URLSearchParams(this.props.location.search);
        return (
            <>
                <h1>Pagina3</h1>
                <span>{this.props.match.params.parametro1}</span>
                <span>{queryString.get('nome')}</span>
            </>
        );
    }
}
export default Pagina3;

I only see this (I removed Pagina4 and Pagina5 because they are the same as Home).

I think there should not be any problem with my code, I checked it multiple times but it still not working. Maybe it's the npx or npm version... or the react-router-dom ^5.2.0... but if there is anything wrong with my code I really want to know why.

harish kumar · Accepted Answer · 2020-06-18T19:48:22.110

In React's JSX, you only need to write <NavBar></NavBar> when the component has child components, like this:

<NavBar>
    <Child />
    <Child />
    <Child />
</NavBar>

But here NavBar is Separate component and Route won't work as child of NavBar Hence try modifying App.js like below

 <BrowserRouter>
    <>
     <NavBar/>
     <Switch>
       <Route path="/home" component={Home} />
       <Route path="/pagina2" component={Pagina2} />
       <Route path="/pagina3/:parametro1?/:parametro2?" component={Pagina3} />
     </Switch>
   </>
</BrowserRouter>

A similar example: https://codesandbox.io/s/react-bootstrap-nav-active-link-eqm0f

Both your answer are right. Thank you. I can only accept one so I will go with your answer this time (I picked at random). — LiefLayer, Jun 18 '20 at 19:53

score 1 · Answer 2 · answered Jun 18 '20 at 19:43

Your NavBar is a adjacent component of your page. Try:

import { BrowserRouter, Route, Switch } from 'react-router-dom';

import './App.css';

import NavBar from './components/NavBar';

import Home from './components/Home';
import Pagina2 from './components/Pagina2';
import Pagina3 from './components/Pagina3';
import Pagina4 from './components/Pagina4';
import Pagina5 from './components/Pagina5';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <>
          <NavBar />
          <Switch>
            <Route path="/home" component={Home} />
            <Route path="/pagina2" component={Pagina2} />
            <Route path="/pagina3/:parametro1?/:parametro2?" component={Pagina3} />
          </Switch>
        </>
      </BrowserRouter>
    );
  }
}

export default App;

Both your answer are right. Thank you. I can only accept one so I will go with Harish Sharma this time (I picked at random). — LiefLayer, Jun 18 '20 at 19:53

React BrowserRouter only load the NavBar

2 Answers2