React-router-dom: нажатие на ссылку добавляет маршрут к URL-ссылке на неопределенное время

Question

После нескольких попыток мне удалось реализовать базовую c вложенную маршрутизацию с React-router-dom.
Вот простая структура проекта :

Вот соответствующие файлы :

Приложение. 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>;
}

Итак, вот результат :
Если я нажимаю nestedComponentOne :

Если я нажимаю nestedComponentTwo :

Проблема заключается в том, что я снова нажимаю nestedComponentOne (или Два) после первого щелчка мышью, маршрут добавляется в строка URL вместо ее замены:

Answer 1

Некоторое обновление необходимо для вашего кода. Рабочая демонстрация

NavBar. js

Здесь вы забыли добавить sla sh / спереди к ссылке из root.

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

ParentComponent. js

Поскольку мы удалили Switch из этого компонента, поэтому нам нужно получить информацию о сопоставлении от родительского маршрутизатора и передать путь для навигации по соответствующему вложенному компоненту

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

Answer 2

Почему бы вам не попробовать сложить все маршруты в один файл. Как то так:

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