React-router-dom: Clicking on Link adds the route to the Url Link indefinitely

Question

After several attempts, I have managed to implement basic nested-routing with React-router-dom.
Here's the simple project structure:

Here are the relevant files:

App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import ParentComponent from "./Components/nestedComponents/ParentComponent";
import NavBar from "./Components/Shared/NavBar";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <NavBar />
        <Switch>
          <Route path="/home" name="Home" component={ParentComponent} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

NavBar.js

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

export default function NavBar() {
  return (
    <div>
      <Link to={`home/nestedComponentOne`}> Nested Component One </Link>
      <Link to={`home/nestedComponentTwo`}> Nested Component Two </Link>
    </div>
  );
}

ParentComponent.js

import React from "react";
import nestedComponentOne from "./nestedComponentOne";
import nestedComponentTwo from "./nestedComponentTwo";
import { Switch, Route } from "react-router-dom";

export default function ParentComponent() {
  return (
    <div>
      <Switch>
        <Route path="/home/nestedComponentOne" component={nestedComponentOne} />
        <Route path="/home/nestedComponentTwo" component={nestedComponentTwo} />
      </Switch>
    </div>
  );
}

nestedComponentOne.js

import React from "react";

export default function nestedComponentOne() {
  return <div>NESTED COMPONENT 1</div>;
}

nestedComponentTwo.js

import React from "react";

export default function nestedComponentTwo() {
  return <div>NESTED COMPONENT 2</div>;
}

So here's the Result:
If I click on nestedComponentOne:

If I click on nestedComponentTwo:

The problem is when I click again on nestedComponentOne (or Two) after the I have clicked it the first time, the route gets added to the url string instead of replacing it:

Raj Kumar · Accepted Answer · 2020-02-18T14:20:46.077

Some update need for your code. Working Demo

NavBar.js

Here you forget to add slash / at front to link from root.

      <Link to={`/home/nestedComponentOne`}> Nested Component One </Link>
      <Link to={`/home/nestedComponentTwo`}> Nested Component Two </Link>

ParentComponent.js

As we removed the Switch from this component, so we need to get the matching information from parent router and pass the path to navigate the corresponding your nested component

     export default function ParentComponent({ match }) {
      return (
        <div> 
          <Route path={`${match.path}/nestedComponentOne`} component={nestedComponentOne} />
          <Route path={`${match.path}/nestedComponentTwo`} component={nestedComponentTwo} />
        </div>
      );
    }

score 0 · Answer 2 · answered Feb 18 '20 at 13:51

0

Why don't you try putting all the route in one file. Something like this:

<Route exact path="/home" name="Home" component={ParentComponent} />
<Route path="/home/nestedComponentOne" component={nestedComponentOne} />
<Route path="/home/nestedComponentTwo" component={nestedComponentTwo} />

answered Feb 18 '20 at 13:51

Raafay Alam

61
4

Because I wanted the nestedRoutes to be in a file and the root route /home to be in App.js, otherwise ReactRouter will not find the path /home – AG_HIHI Feb 18 '20 at 13:53

React-router-dom: Clicking on Link adds the route to the Url Link indefinitely

2 Answers2

NavBar.js

ParentComponent.js