React Routing V6 problem, redirecting to another path: '/contact' the content from <Contact /> get updated above nav instead of separate page

user_16945061 0
Viewed 61

I am trying to make Airbnb Clone using React 18, but above nav something like this is happening:

I am using React BrowserRouter V6, whenever we redirect to another page like localhost:3000/about, the about page should open instead of the whole page rendering on all the paths:

</About Us> component

component

App.js:

import './App.css';
import Title from './Components/Title.js'
import Tagline from './Components/Tagline.js'
import Navbar from './Components/Navbar.js'
import Firstpara from './Components/Firstpara.js'
import Card from './Components/Card.js'
import React, { Components } from 'react'

export default function App() {
  return (
    <div className="App">  
  
      <div className="header">
        <Title />
        <Tagline />
        <Navbar />
      </div>
      <Firstpara />
      <Card />

      {/* <Contact/> */}
    </div>
  );
}

Navbar.js:

import React from 'react';
import { Link, BrowserRouter as Router, Route, Routes } from "react-router-dom";
import About from "../Pages/About"
import Contact from "../Pages/Contact"
import Features from "../Pages/Features"
import Error from '../Pages/Error'

export default function Navbar() {
    return (
        <>
            <div className="navbar container-fluid">
                <Router>
                    <Routes>
                        <Route path="/about" element={<About />} />
                        <Route path="/contact" element={<Contact />} />
                        <Route path="/features" element={<Features />} />
                        <Route path="*" element={<Error />} />
                    </Routes>

                    <div id="right-menu">
                        <ul className="navbar-nav">
                            <li><a href="#worldclass">Visit</a></li>
                            <li><Link to="/about">About</Link></li>
                            <li><Link to="/features">Features</Link></li>
                            <li><Link to="/contact">Contact</Link></li>
                        </ul>
                    </div>
                </Router>
            </div>
        </>
    )
}
react-router-dom react-router reactjs javascript
2 Answers

I think the issue you have is that the Navbar is rendering all the routing code, the router, routes, and the links. Then additionally it is rendering the routes above the links.

Move the Router and routes out to the App. The Router should wrap the Navbar and routes, and the routes should be rendered below the Navbar/header.

Example:

App

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div className="App">  
  
        <div className="header">
          <Title />
          <Tagline />
          <Navbar />
        </div>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/features" element={<Features />} />
          <Route path="*" element={<Error />} />
        </Routes>

        <Firstpara />
        <Card />

        {/* <Contact/> */}
      </div>
    </Router>
  );
}

Navbar

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

export default function Navbar() {
  return (
    <div className="navbar container-fluid">
      <div id="right-menu">
        <ul className="navbar-nav">
          <li><a href="#worldclass">Visit</a></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/features">Features</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </div>
    </div>
  );
}
user_86908570

In your app.js file change your code to this (this is just for a demo) you change it as your requirements

import { BrowserRouter,Routes,Route,} from "react-router-dom";
import Navbar from "./components/navbar/Navbar";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
return (
 <>
  <BrowserRouter>
    <Navbar />
    <Routes>
      <Route path="/" index element={<Home />} />
      <Route path="/login"  element={<Login />}/>
      <Route path="/register" element={<Login />}/>
    <Routes/>
  </BrowserRouter>
 </>
 );
user_153676540
Related