<Link> with "react-router-dom 6.7.0"-CodePudding

I'm trying to create my first website, but having issues with redirection to another page. I added Routes to App.jsx, and added links to Navbar; clicking on "Services" in Navbar goes to "/services", but the page doesn't show anything, only Navbar. I also tried with NavLink, but it did't change anything. Please help me figure out what the problem is.

import React from 'react';
import "./App.css";
import { BrowserRouter, Routes,Route } from "react-router-dom";
import Home from './pages/home/Home';
import Samples from './pages/samples/Samples';
import Services from './pages/services/Services';
import Navbar from './components/navbar/Navbar';
import Reviews from './components/reviews/Reviews';
import Contacts from './components/contacts/Contacts';

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/services" element={<Services />} />
          <Route path="/samples" element={<Samples />} />
          {/* <Route path="#reviews" element={<Reviews />} /> */}
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { RiMenuFill, RiCloseLine } from 'react-icons/ri';
import './navbar.css';
import MainLogo from "../../assets/MainLogo.png";

const Navbar = () => {
  const [toggleMenu, setToggleMenu] = useState(false); 

  return (
    <div>
      <div className='navbar'>
        <Link style={{textDecoration:"none"}} to="/">
          <img src={MainLogo} alt="main_logo" className="navbar_logo"/>
        </Link>
        <ul className='navbar_links'>
          <li>
            <Link to="/services">Services</Link>
          </li>
          <li>
            <Link to="/samples">Samples</Link>
          </li>
          <li>
            <Link to="/">Reviews</Link>
          </li>
          <li>
            <Link to="#gallery">Gallery</Link>
          </li>
          <li>
            <Link to="#about">About Us</Link>
          </li>
          <li>
            <Link to="#contacts">Contacts</Link>
          </li>
        </ul>
      </div>

CodePudding user response：

I added {BrowserRouter} to index.js, and it worked

import React from "react";
import ReactDOM from "react-dom";
import App from './App';
import './index.css';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <React.StrictMode>
        <BrowserRouter>
        <App />
        </BrowserRouter>
    </React.StrictMode>
)

CodePudding user response：

There is no issue with the routing. The issue here is that the navbar uses fixed positioning and the "/services" route content is rendered under the navbar.

Give the App component some top margin to push the content down below the navbar.

Example:

const App = () => {
  return (
    <div className='app'> // <-- app container
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/services" element={<Services />} />
          <Route path="/samples" element={<Samples />} />
          {/* <Route path="#reviews" element={<Reviews />} /> */}

        </Routes>
        {/* <Reviews /> */}
      </BrowserRouter>
    </div>
  )
}

app.css

.app {
  margin-top: 93px; // <-- header/navbar height
}