App.jsx

import "./../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./../node_modules/bootstrap/dist/js/bootstrap.bundle";
import React from "react";
import Projects from "./Projects";
import Contact from "./Contact";
import {Route} from "react-router-dom";
import Home from "./Home";
import Navbar from "./Navbar";
import {Routes,BrowserRouter as Router} from "react-router-dom";


const App = () => {
    return(
        <>
            <style>{'body { background-color: black; }'}</style>
                <Navbar/>
                
                <Router>
                    <Routes>
                        <Route path="/" element={<Home/>}/>
                        <Route exact path="/contact/" element = {<Contact/>}/>
                        <Route exact path="/projects/" element = { <Projects/>}/>
                    </Routes>
                </Router>
        </>
    );

};
export default App;

Navbar.jsx

import React from "react"
import {NavLink,BrowserRouter as Router} from "react-router-dom";
const Navbar = ()=>{
   return(
<>
<Router>
    <div className="container-fluid nav_bg">
      <div className="row">
        <div className="col-10 ms-auto ">

      <nav className="navbar sticky-top navbar-expand-lg transparent" id="nav1">
      <NavLink  className="brand-name " style={{color:"white"}} strict to="/">Shriharsh's Colosseum</NavLink>
      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
  
      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav ms-auto brand-desc text-uppercase">
          <li className="nav-item active">
            <NavLink  className="nav-link"  style={{color:"white"}} strict to="/">Home</NavLink>
          </li>
          <li className="nav-item">
            <NavLink  className="nav-link"  style={{color:"white"}}  strict to="/projects/">Projects</NavLink>
          </li>
          <li className="nav-item">
            <NavLink  className="nav-link"  style={{color:"white"}} strict to="/contact/">Contact</NavLink>
   </li>
        </ul>
      </div>
    </nav>

        </div>
      </div>
    </div>
</Router>
   </>
   );
};

export default Navbar;

The problem associated and what the code is intended to do:

I have a app with a navbar rendered nicely,now,for it's utility,even when the links are clicked the page doesn't seem to render it,even when the link changes.I tried searching for the solution for the similar problem and came across many but all of them seem to have their own unique cases of causation.I tried to changed path from /path to /path/ to see if it would work by any change,it doesn't.Likewise,gave it a shot by changing the NavLink to Link,doesn't work.

CodePudding user response：

As shown in the React Router dom v6 documentation the BrowserRouter wraps your app to store the current location of your app in the address bar, so your index.jsx should be like this:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>{/* The rest of your app goes here */}</BrowserRouter>,
  root
);

then, to properly setup routes you should write in your App.jsx file your routes using the Routes and Route components.

Here's how your App.jsx should look like:

import "./../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./../node_modules/bootstrap/dist/js/bootstrap.bundle";
import React from "react";
import Projects from "./Projects";
import Contact from "./Contact";
import { Route } from "react-router-dom";
import Home from "./Home";
import Navbar from "./Navbar";
import { Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <>
      <style>{"body { background-color: black; }"}</style>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route exact path="/contact" element={<Contact />} />
        <Route exact path="/projects" element={<Projects />} />
      </Routes>
    </>
  );
};
export default App;

Then, to navigate through the routes you declared in the App.jsx file you can use the Link component (here's the documentation for it)

So, your NavBar.jsx should look like this:

import React from "react";
import { Link } from "react-router-dom";
const Navbar = () => {
  return (
    <>
      <div className="container-fluid nav_bg">
        <div className="row">
          <div className="col-10 ms-auto ">
            <nav
              className="navbar sticky-top navbar-expand-lg transparent"
              id="nav1"
            >
              <Link to="/" className="brand-name" style={{ color: "white" }}>
                Shriharsh's Colosseum
              </Link>
              <button
                className="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span className="navbar-toggler-icon"></span>
              </button>

              <div
                className="collapse navbar-collapse"
                id="navbarSupportedContent"
              >
                <ul className="navbar-nav ms-auto brand-desc text-uppercase">
                  <li className="nav-item active">
                    <Link
                      to="/"
                      className="nav-link"
                      style={{ color: "white" }}
                    >
                      Home
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link
                      to="/projects"
                      className="nav-link"
                      style={{ color: "white" }}
                    >
                      Projects
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link
                      to="/contact"
                      className="nav-link"
                      style={{ color: "white" }}
                    >
                      Contact
                    </Link>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </>
  );
};

export default Navbar;

Do note that I removed the Router component from the Navbar since not necessary.

CodePudding user response：

Issue

You are rendering the Navbar component and links into one router and the routes you want to link to in another router. You need only one router to provide a routing context to an entire React app.

Solution

Remove the extraneous router the Navbar is rendering and move Navbar into the router that the App component is rendering.

Navbar.jsx

import React from "react"
import { NavLink } from "react-router-dom";

const Navbar = () => {
  return (
    // <-- Router removed
    <div className="container-fluid nav_bg">
      <div className="row">
        <div className="col-10 ms-auto ">
          <nav className="...." id="nav1">
            <NavLink
              className="brand-name"
              style={{ color: "white" }}
              to="/"
            >
              Shriharsh's Colosseum
            </NavLink>
            <button ....>
              <span className="navbar-toggler-icon"></span>
            </button>
  
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="....">
                <li className="nav-item active">
                  <NavLink className="nav-link" style={{ color: "white" }} to="/">
                    Home
                  </NavLink>
                </li>
                <li className="nav-item">
                  <NavLink
                    className="nav-link"
                    style={{ color: "white" }}
                    to="/projects"
                  >
                    Projects
                  </NavLink>
                </li>
                <li className="nav-item">
                  <NavLink
                    className="nav-link"
                    style={{ color: "white" }}
                    to="/contact"
                  >
                    Contact
                  </NavLink>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  );
};

export default Navbar;

App.jsx

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./../node_modules/bootstrap/dist/js/bootstrap.bundle";
import Projects from "./Projects";
import Contact from "./Contact";
import Home from "./Home";
import Navbar from "./Navbar";

const App = () => {
  return(
    <>
      <style>{'body { background-color: black; }'}</style>
      <Router>
        <Navbar /> // <-- inside router
        <Routes>
          <Route path="/" element={<Home />}/>
          <Route path="/contact" element={<Contact />} />
          <Route path="/projects" element={ <Projects />} />
        </Routes>
      </Router>
    </>
  );
};

export default App;

Please also note that I removed the trailing "/" character on the routes.