Need some help in react routers V6

billy.s56 · February 24, 2022, 12:48pm

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;

lasjorg · February 24, 2022, 2:02pm

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

Docs: navigating

billy.s56 · February 24, 2022, 2:25pm

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;

billy.s56 · February 24, 2022, 2:26pm

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

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

this is? what you’re taking about?

billy.s56 · February 24, 2022, 3:17pm

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

miku86 · February 24, 2022, 3:38pm

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/

lasjorg · February 24, 2022, 3:40pm

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.

billy.s56 · February 24, 2022, 3:56pm

billy.s56 · February 24, 2022, 4:20pm

@lasjorg … Did you check out the respo ??

lasjorg · February 24, 2022, 4:49pm

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.

billy.s56 · February 24, 2022, 4:50pm

I’m was just trying something,…

billy.s56 · February 24, 2022, 4:52pm

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

billy.s56 · February 24, 2022, 4:53pm

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

billy.s56 · February 24, 2022, 4:58pm

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

lasjorg · February 24, 2022, 4:58pm

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>
  );
}

billy.s56 · February 24, 2022, 5:02pm

Wait … lemme check !

billy.s56 · February 24, 2022, 5:04pm

@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

billy.s56 · February 24, 2022, 5:06pm

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

billy.s56 · February 24, 2022, 5:11pm

@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 />} />

lasjorg · February 24, 2022, 5:15pm

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 />
    </>
  );
}