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

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

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

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

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

Если я нажму на nestedComponentTwo:
введите описание изображения здесь

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


reactjs react-router-dom react-router react-router-v4 react-router-component
person AG_HIHI    schedule 18.02.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

NavBar.js

Здесь вы забыли добавить косую черту / впереди для ссылки из корневого каталога.

      <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>
      );
    }
person Raj Kumar    schedule 18.02.2020

arrow_upward
0
arrow_downward

Почему бы тебе не попробовать поместить весь маршрут в один файл. Что-то вроде этого:

<Route exact path="/home" name="Home" component={ParentComponent} />
<Route path="/home/nestedComponentOne" component={nestedComponentOne} />
<Route path="/home/nestedComponentTwo" component={nestedComponentTwo} />
person Raafay Alam    schedule 18.02.2020
comment
Потому что я хотел, чтобы nestedRoutes находился в файле, а корневой маршрут / дом был в App.js, иначе ReactRouter не найдет путь / дом - person AG_HIHI; 18.02.2020