Need some help in react routers V6

JavaScript
1

Hey There everyone ! :))
I’m creating a website in react and I’m having a problem using react-routers.
Below I’m showing you the demo:

App.js file:

import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from './Components/Navbar.jsx';
import BlogList from './Components/BlogList.jsx';
function App() {
  return (
    <div>
    <Router>
    <Navbar/>
    <Routes>
        <Route path="/blogs" element={<BlogList/>}/>
      </Routes>
    </Router>
    </div>
  );
}

export default App;

All my landing page sections are in Navbar.js component:

Navbar.js

const Navbar = () => {
  return (
    <div>
      <div id="topbar" className="fixed-top">
        <h4 className="text-center  mb-3">
          unique design-same expert service
        </h4>
      </div>

      {/* ======= Header ======= */}
      <header id="header" className="fixed-top">
        <div className="container d-flex align-items-center">
          <h1 className="logo me-5">
            <a href="index.html">Infinity</a>
          </h1>
          {/* Uncomment below if you prefer to use an image logo */}
          {/* <a href="index.html" class="logo me-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>*/}
          <nav id="navbar" className="navbar order-last order-lg-0">
            <ul>
              <li>
                <a className="nav-link scrollto active" href="#hero">
                  Home
                </a>
              </li>
              <li >
                <a className="nav-link scrollto" href="#blogs">
                  About
                </a>
              </li>
              <li>
                <a className="nav-link scrollto" href="#services">
                  Services
                </a>
              </li>
              <li>
                <a className="nav-link scrollto" href="#departments">
                  Departments
                </a>
              </li>
              <li>
                <Link className="nav-link scrollto" to="/blogs">
                  Blogs
                </Link>
              </li>
              <li className="dropdown">
                <a href="#">
                  <span>Drop Down</span> <i className="bi bi-chevron-down" />
                </a>
                <ul>
                  <li>
                    <a href="#">Drop Down 1</a>
                  </li>
                  <li className="dropdown">
                    <a href="#">
                      <span>Deep Drop Down</span>{" "}
                      <i className="bi bi-chevron-right" />
                    </a>
                    <ul>
                      <li>
                        <a href="#">Deep Drop Down 1</a>
                      </li>
                      <li>
                        <a href="#">Deep Drop Down 2</a>
                      </li>
                      <li>
                        <a href="#">Deep Drop Down 3</a>
                      </li>
                      <li>
                        <a href="#">Deep Drop Down 4</a>
                      </li>
                      <li>
                        <a href="#">Deep Drop Down 5</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Drop Down 2</a>
                  </li>
                  <li>
                    <a href="#">Drop Down 3</a>
                  </li>
                  <li>
                    <a href="#">Drop Down 4</a>
                  </li>
                </ul>
              </li>
              <li>
                <a className="nav-link scrollto" href="#contact">
                  Contact
                </a>
              </li>
            </ul>
            <i className="bi bi-list mobile-nav-toggle" />
            
          </nav>
          {/* .navbar */}
          <div className="row ms-auto">
            <div className="col-lg-12 col-sm-12">
              <button className="btn btn-outline-primary btn-lg">Log In</button>
            </div>
          </div>
          <div className="row ms-1">
            <div className="col-lg-12 col-sm-12">
              <button className="btn btn-primary btn-lg sign-up">Sign Up</button>
            </div>
          </div>

        </div>
      </header>
      {/* End Header */}
        < Header/>
        <TeamWriter/>
        <EssayWritingFeatures/>
        <LatestFeedback/>
        <PaperWritingServices/>
        <FreqAskQuestions/>
        <EssayWritingExp/>
        <StayAnonymus/>
  
    </div>
  );
};

Now I’m trying to routing to the blog page … As you can see I’ve given the path in Navbar.js component:

 <li>
                <Link className="nav-link scrollto" to="/blogs">
                  Blogs
                </Link>
   </li>

But when I click to my blog section … it won’t navigate to my blog page.
Only show the path like this: http://localhost:3000/blogs

and in the last of my landing page, it shows like this;

blog
blog1652×817 103 KB

2

You do not seem to be using the Link component or Navigate function.

Docs: navigating

3

Man … I have used the Link in Navbar component;

import React from "react";
import Header from './Header.jsx';
import TeamWriter from './TeamWriter.jsx';
import EssayWritingFeatures from './EssayWritingFeatures.jsx';
import LatestFeedback from './LatestFeedback.jsx';
import PaperWritingServices from './PaperWritingServices.jsx';
import FreqAskQuestions from './FreqAskQuestions.jsx';
import EssayWritingExp from './EssayWritingExp.jsx'
import StayAnonymus from './StayAnonymus.jsx';

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

const Navbar = () => {
  return (
    <div>
      <div id="topbar" className="fixed-top">
        <h4 className="text-center  mb-3">
          unique design-same expert service
        </h4>
      </div>

      {/* ======= Header ======= */}
      <header id="header" className="fixed-top">
        <div className="container d-flex align-items-center">
          <h1 className="logo me-5">
            <a href="index.html">Infinity</a>
          </h1>
          {/* Uncomment below if you prefer to use an image logo */}
          {/* <a href="index.html" class="logo me-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>*/}
          <nav id="navbar" className="navbar order-last order-lg-0">
            <ul>
              <li>
                <a className="nav-link scrollto active" href="#hero">
                  Home
                </a>
              </li>
              <li >
                <a className="nav-link scrollto" href="#blogs">
                  About
                </a>
              </li>
              <li>
                <a className="nav-link scrollto" href="#services">
                  Services
                </a>
              </li>
              <li>
                <a className="nav-link scrollto" href="#departments">
                  Departments
                </a>
              </li>
              <li>
                <Link className="nav-link scrollto" to="/blogs">
                  Blogs
                </Link>
              </li>
              <li className="dropdown">
                <a href="#">
                  <span>Drop Down</span> <i className="bi bi-chevron-down" />
                </a>
                <ul>
                  <li>
                    <a href="#">Drop Down 1</a>
                  </li>
                  <li className="dropdown">
                    <a href="#">
                      <span>Deep Drop Down</span>{" "}
                      <i className="bi bi-chevron-right" />
                    </a>
                    <ul>
                      <li>
                        <a href="#">Deep Drop Down 1</a>
                      </li>
                      <li>
                        <a href="#">Deep Drop Down 2</a>
                      </li>
                      <li>
                        <a href="#">Deep Drop Down 3</a>
                      </li>
                      <li>
                        <a href="#">Deep Drop Down 4</a>
                      </li>
                      <li>
                        <a href="#">Deep Drop Down 5</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Drop Down 2</a>
                  </li>
                  <li>
                    <a href="#">Drop Down 3</a>
                  </li>
                  <li>
                    <a href="#">Drop Down 4</a>
                  </li>
                </ul>
              </li>
              <li>
                <a className="nav-link scrollto" href="#contact">
                  Contact
                </a>
              </li>
            </ul>
            <i className="bi bi-list mobile-nav-toggle" />
            
          </nav>
          {/* .navbar */}
          <div className="row ms-auto">
            <div className="col-lg-12 col-sm-12">
              <button className="btn btn-outline-primary btn-lg">Log In</button>
            </div>
          </div>
          <div className="row ms-1">
            <div className="col-lg-12 col-sm-12">
              <button className="btn btn-primary btn-lg sign-up">Sign Up</button>
            </div>
          </div>

        </div>
      </header>

        < Header/>
        
        <TeamWriter/>
        <EssayWritingFeatures/>
        <LatestFeedback/>
        <PaperWritingServices/>
        <FreqAskQuestions/>
        <EssayWritingExp/>
        <StayAnonymus/>
  
    </div>
  );
};

export default Navbar;
4 
import {Link} from 'react-router-dom';

               <li>
                <Link className="nav-link scrollto" to="/blogs">
                  Blogs
                </Link>
              </li>

this is? what you’re taking about?

5

I really don’t know how to overcome from this problem…

6

Hey there,

it would be great to have a working project of your code, so that we can test stuff out.
You can use a platform like https://codesandbox.io/

1 Like
7

In all fairness that was hard to spot in the sea of normal href links you have. Although I do see you pulled it out after all the code and I just didn’t notice it.

Not sure if I can say much solely based on the code you have posted. What does the index file look like?

If you have a GitHub repo with the code it would be a lot easier to look at. Or a CodeSandbox as suggested would be great as well.

8
9

@lasjorg … Did you check out the respo ??

10

I don’t really understand why you are rendering the components inside the Nav component?

Create a component for the / path like Home or something and render all the components in that. Then make a / route for that “Home” component.

11

I’m was just trying something,… :sweat_smile:

12

So you’re saying … make a new component and render all my components in the new component?

13

But why Link is not working?? cause I have to route only one page(blog page) … don’t want to route all pages …

14

I don’t know why … only url changes … but is not rendering the component

15

It is working, that is why you see Blog at the bottom of the page.

You have <Navbar /> outside all the routes and are rendering everything inside it.

/* all imports */

function App() {
  return (
    <div>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/blogs" element={<BlogList />} />
        </Routes>
      </Router>
    </div>
  );
}

/* all imports */

export default function Home() {
  return (
    <div>
      <Headers />
      <TeamWriter />
      <EssayWritingFeatures />
      <LatestFeedback />
      <PaperWritingServices />
      <FreqAskQuestions />
      <EssayWritingExp />
      <StayAnonymus />
    </div>
  );
}
1 Like
16

Wait … lemme check !

17

@lasjorg … its still not working :((
I’ve done the same thing !
but this time … the blog component doesn’t show on the bottom.
only url get change

18

Wait … I guess, I’ve figure out something !!

19

@lasjorg … it works !!!
Thank you so much man !!
last thing I want to know that …
In router V5 we use exact!
what will be use in V6 ??

 <Route path="/" element={<AllComp />} />
1 Like
20

I haven’t honestly used V6 much at all yet. But here is the Upgrading from v5 docs.

https://reactrouter.com/docs/en/v6/upgrading/v5

  • <Route exact> is gone. Instead, routes with descendant routes (defined in other components) use a trailing * in their path to indicate they match deeply

BTW, you can also move all the component rendering inside App and move the router to index if you don’t like the Home component.

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/blogs" element={<BlogList />} />
      </Routes>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

function App() {
  return (
    <>
      <Headers />
      <TeamWriter />
      <EssayWritingFeatures />
      <LatestFeedback />
      <PaperWritingServices />
      <FreqAskQuestions />
      <EssayWritingExp />
      <StayAnonymus />
    </>
  );
}
1 Like