Unable to implement single page application behavior using react router dom, why?-CodePudding

I am trying to create a UI in react with a navigation bar at the top. I want each of my pages to be displayed under this navigation bar as a single page application. To implement single page application behavior I am using react-router-dom version 5.3.2. The problem is it fails to display the "/home" page even though the endpoint shown in addressbar is correct and corresponds to the page.

My App.js is :

  function App() {
  return (
    <BrowserRouter>
      <div className="App">
       <Switch>
          <Route path="/login" component={Login}></Route>
          <Route path="/registration" component={Registration}></Route>
          <Route path="/main" component={MainPage}></Route>
           //purposefully wrote below line as the "MainPage" with "home" as path as "MainPage" has the top navigation bar which I want to be shown all the time
          <Route path="/home" component={MainPage}></Route>
        </Switch>
      </div>
      </BrowserRouter>
  );
}`

Code of MainPage.js is :

    export default function MainPage() {
    return (
        <>
            <BrowserRouter>
                <div className='container-fluid'>
                    <div className='row'>
                        <div className='col'>
                            <TopNavigationBar />
                        </div>
                    </div>
                    <div className='row'>
                        <div className='col'>
                            <Switch>
                                //puposefully writting below line because when the main page is displayed the home page is automatically open below the navigation bar (which it is failing to)
                                <Route path="main">
                                    <Home />
                                </Route>
                                <Route path="home">
                                    <Home />
                                </Route>
                            </Switch>
                        </div>
                    </div>
                </div>
            </BrowserRouter>
        </>
    )
}

Navigation bar's code is i.e. TopNavigationBar.js is,

export default function TopNavigationBar() {
return (
    <div>
        <Navbar bg="light" variant="light">
            <Container>
                <NavbarBrand><h1><FaFacebook /></h1></NavbarBrand>
                <SearchUserComponent />
                <Nav className="me-auto">
                    // FaHome is an icon to click.
                    <HorizontalSpace size="50" /><Link to="home"><h1><FaHome /></h1></Link>
                </Nav>
            </Container>
        </Navbar>  
    </div>
)}

What is wrong in my logic?

UI Looks like this

CodePudding user response：

import logo from './logo.svg';
import './App.css';
import {Routes,Route} from "react-router-dom";
import Home from './Pages/Home/Home';
import Navbar from './Pages/Shared/Navbar';



function App() {
  return (
    <div className='max-w-7xl mx-auto'>
      <Navbar></Navbar>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/home" element={<Home/>} />
      </Routes>      
    </div>
  );
}

export default App;

import React from 'react';
function Navbar() {
  return (
    <div >
     *** Your code: It will be fixed at the top.
    </div>
  )
}

export default Navbar

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

function Home() {
  return (
    <div>
     *** Your code: Home.
     *** Use the Link to navigate.
    </div>
  )
}
export default Home

You can fix it easily by using react-router v6.

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",

CodePudding user response：

Add an exact route for the home page in your App.js within the <Switch> body like:

<Route exact={true} path="/" component={Home} />

An example of code I had in a react project:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import './App.css';


const App = () => (
  <Switch>
    <Route exact={true} path="/" component={Home} />
  </Switch>
);

export default App;

Also I don’t think you necessarily need your main content within the —

<BrowserRouter>

If I’m correct?