CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
newprogrammer12
newprogrammer12

Reputation: 243

React nested Routing react-route-dom v6

I have a nested route nav-list i assigned the route path to be current url + new nested component, which works on first click but then if i hit that same button again the current new url will be different which mean i am appending new url to the route

enter image description here

the url will be http://localhost:3000/maintenance/1/components which is what i want, but on second click it will be http://localhost:3000/maintenance/1/components/components how can i prevent this.

VesselMaintenance.js:

import React from "react";
import components from "../../../assets/maintenance-nav/components.png";
import jobs from "../../../assets/maintenance-nav/jobs.png";
import hours from "../../../assets/maintenance-nav/hours.png";
import logs from "../../../assets/maintenance-nav/logs.png";
import planning from "../../../assets/maintenance-nav/planning.png";
import { Link, Outlet, useParams } from "react-router-dom";
function VesselMaintenance() {
  const path = window.location.pathname;
  const { id } = useParams();
  console.log(id);
  return (
    <div className="maintenance-container">
      <div className="maintenance-nav-list">
        <Link className="maintenance-nav-list-card" to={`${path}/components`}>
          {" "}
          <img className="maintenance-nav-list-image" src={components}></img>
          <span>Components</span>
        </Link>
        <Link className="maintenance-nav-list-card" to={""}>
          {" "}
          <img className="maintenance-nav-list-image" src={jobs}></img>
          <span>Work List</span>
        </Link>
        <Link className="maintenance-nav-list-card" to={""}>
          {" "}
          <img className="maintenance-nav-list-image" src={hours}></img>
          <span>Running Hours</span>
        </Link>
        <Link className="maintenance-nav-list-card" to={""}>
          {" "}
          <img className="maintenance-nav-list-image" src={planning}></img>
          <span>maintenance</span>
          <span>Planning</span>
        </Link>
        <Link className="maintenance-nav-list-card" to={""}>
          {" "}
          <img className="maintenance-nav-list-image" src={logs}></img>
          <span>Logs</span>
        </Link>
      </div>
      <div className="maintenance-content">
        <Outlet />
      </div>
    </div>
  );
}

export default VesselMaintenance;

the App.js :

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Sidebar from "./components/layout/Sidebar";
import Header from "./components/layout/Header";
import Footer from "./components/layout/Footer";
import OveriewFleet from "./components/screen/overview/OveriewFleet";
import VesselMaintenance from "./components/screen/maintenance/VesselMaintenance";
import VesselComponents from "./components/screen/maintenance/VesselComponents";
function App() {
  return (
    <Router>
      <div className="App">
        <div className="container">
          <Sidebar />
          <div className="layout">
            <Header />
            <div className="content">
              <Routes>
                <Route exact path="/" element={<OveriewFleet />} />
                <Route path="/maintenance/:id" element={<VesselMaintenance />}>
                  <Route
                    path="components"
                    element={<VesselComponents />}
                  ></Route>
                </Route>
              </Routes>
            </div>
            <Footer />
          </div>
        </div>
      </div>
    </Router>
  );
}

export default App;

Upvotes: 2

Views: 564

Answers (1)

Drew Reese
Drew Reese

Reputation: 203466

You are overcomplicating things since react-router-dom@6 can handle relative links automatically. In other words, there's no need to try and build your own relative links and paths from a "current path" manually. From what I can see you need the links to link to sibling routes of the current location/path.

Use a relative path prefixed with ".." to navigate relative to the parent path, i.e. to="../components".

Example:

<Link className="maintenance-nav-list-card" to="../components">
  <img className="maintenance-nav-list-image" src={components} />
  <span>Components</span>
</Link>

If VesselMaintenance is rendered on "/maintenance/XXXX" then linking to "../components", "../worklist", "../runninghours", etc... will navigate between these sibling routes/paths.

Upvotes: 1

Related Questions