Issue with BrowserRouter – navigation doesn't work properly

May 2, 2022

This is my first reactjs application and I have an issue with the navigation. When I try to navigate via url …/posts or ../home only the main App page is showing up. How can I fix this? Thank you in advance!

I have App main page where user can Login or Register:

import React,{useState, useEffect} from 'react';
import {Register} from './subcomponents/Register';
import {Login} from './subcomponents/Login';

export function App() {
   return (
    <div className="root"> 
      <Login />
      <p>Hi {name}</p>
      <Register/>
    </div>
  );
}

Home page, when the user is logged in to be redirected:

import React from 'react';
import { Posts } from './Posts';
import {Home} from './Home.jsx';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import {Nav} from './Nav';

export function Home(){
    return(
        <div id="home">
            <BrowserRouter>
                <Nav/>
                <Routes>
                    <Route path='/home' element={<Home/>}/>
                    <Route path="/posts" element={<Posts/>}/>
                </Routes>
            </BrowserRouter>
            <h3>This is the home page</h3>
        </div>
    )
}

Nav component:

import React from 'react';
import {Link} from 'react-router-dom'
import '../css/nav.css';
import Logo from '../images/Logo.png';

export function Nav(){
    return(
        <div id="nav">
            <img src={Logo} className="nav-logo" alt="logo"/>
            <ul>
                <li>
                    <Link to="/home">Home</Link>
                </li>
                <li>
                    <Link to="/posts">Posts</Link>
                </li>
            </ul>
        </div>
    )
}

>Solution :

route components must be in app.jsx/js (root page)

 export function App(){
        return(
             <BrowserRouter>
                <div id="app">  
                   <Routes>
                       <Route path='/home' element={<Home/>}/>
                       <Route path="/posts" element={<Posts/>}/>
                   </Routes>          
               </div>
           </BrowserRouter>
        )
    }