Вложенный «редирект» в React-Router-DOM - PullRequest
Новая
       87

Вложенный «редирект» в React-Router-DOM

0 голосов
/ 13 июля 2020

Я новичок в React JS, и теперь я пытаюсь научиться использовать «response-router-dom». Здесь у меня очень простое приложение, и я пытаюсь исправить одну проблему. Итак, есть 4 страницы (Главная страница / Первая страница / Вторая страница / Третья страница с элементами ). Мы можем игнорировать первые 3 страницы и сосредоточиться на последней - Третья страница с элементами . У нас есть 3 элемента. Я использовал <Redirect />, чтобы сделать Первый элемент содержимое видимым сразу после того, как пользователи нажмут Третья страница с элементами , и, похоже, все работает нормально, но есть проблема ... Первый раз вы нажимаете на Третья страница с элементами , Первый элемент отображается должным образом. Но если вы все еще находитесь внутри Третья страница с элементами и снова нажимаете на него, Первый элемент исчезает, и вам в основном нужно перезагрузить страницу или go на другую страницу и обратно.

Мой вопрос: что мне делать, чтобы Первый элемент оставался, даже если пользователи нажимают Третью страницу с элементами несколько раз подряд? 

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

import "./App.css";

const Header = () => {
  return (
    <ul>
      <li>
        <NavLink to="/">Main Page</NavLink>
      </li>
      <li>
        <NavLink to="/first">First Page</NavLink>
      </li>
      <li>
        <NavLink to="/second">Second Page</NavLink>
      </li>
      <li>
        <NavLink to="/third-with-items">Third Page wih Items</NavLink>
      </li>
    </ul>
  );
};

const Main = () => <h1>Main Page</h1>;

const First = () => {
  return <h3>First Page Content</h3>;
};
const Second = () => {
  return <h3>Second Page Content</h3>;
};
const Third = () => {
  return (
    <div>
      <div>
        <h3>Third Page Content</h3>
        <ul>
          <li>
            <NavLink to="/third-with-items/item1">First Item</NavLink>
          </li>
          <li>
            <NavLink to="/third-with-items/item2">Second Item</NavLink>
          </li>
          <li>
            <NavLink to="/third-with-items/item3">Third Item</NavLink>
          </li>
        </ul>
      </div>
      <Redirect to="/third-with-items/item1" />
      <Route path="/third-with-items/item1" component={FirstItem} />
      <Route path="/third-with-items/item2" component={SecondItem} />
      <Route path="/third-with-items/item3" component={ThirdItem} />
    </div>
  );
};

const FirstItem = () => (
  <div>This text should be shown after you click "Third Page with Items"</div>
);
const SecondItem = () => <div>Something...</div>;
const ThirdItem = () => <div>Another something...</div>;

const App = () => {
  return (
    <div>
      <Header />
      <Route exact path="/" component={Main} />
      <Route path="/first" component={First} />
      <Route path="/second" component={Second} />
      <Route path="/third-with-items" component={Third} />
    </div>
  );
}

export default App;

1 Ответ

0 голосов
/ 13 июля 2020

Замените: 

<Redirect to="/third-with-items/item1" />

на: 

<Route exact path="/third-with-items" component={FirstItem} />

Документация React Router показывает пример маршрутов вложения, которые могут помочь вам улучшить ваш компонент: 

import {BrowserRouter, Route, NavLink, Switch, useRouteMatch} from "react-router-dom";

const Third = () => {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <div>
        <h3>Third Page Content</h3>
        <ul>
          <li>
            <NavLink to={`${url}/item1`}>First Item</NavLink>
          </li>
          <li>
            <NavLink to={`${url}/item2`}>Second Item</NavLink>
          </li>
          <li>
            <NavLink to={`${url}/item3`}>Third Item</NavLink>
          </li>
        </ul>
      </div>

      <Switch>
        <Route exact path={path} component={FirstItem} />
        <Route path={`${path}/item1`} component={FirstItem} />
        <Route path={`${path}/item2`} component={SecondItem} />
        <Route path={`${path}/item3`} component={ThirdItem} />
      </Switch>
    </div>
  );
};
...