reactjs - Verschachteltes „Redirect“ im React-Router-DOM

Nested "Redirect" in React-Router-DOM

Ich bin neu bei React JS und versuche jetzt zu lernen, wie man „react-router-dom“ verwendet. Hier habe ich eine sehr einfache App und versuche, ein Problem zu beheben. Es gibt also 4 Seiten (Hauptseite / Erste Seite / Zweite Seite / Dritte Seite mit Elementen). Wir können die ersten drei Seiten ignorieren und uns auf die letzte Seite konzentrieren – die dritte Seite mit Elementen. Da haben wir 3 Artikel. Ich habe <Redirect /> um den Inhalt des ersten Elements sofort sichtbar zu machen, nachdem Benutzer auf die dritte Seite mit Elementen geklickt haben, und es scheint gut zu funktionieren, aber es gibt ein Problem ... Wenn Sie zum ersten Mal auf die dritte Seite mit Elementen klicken, wird das erste Element wie erwartet angezeigt. Wenn Sie sich jedoch immer noch auf der dritten Seite mit den Elementen befinden und erneut darauf klicken, verschwindet das erste Element und Sie müssen die Seite grundsätzlich neu laden oder zu einer anderen Seite und zurück gehen.

Meine Frage lautet: Was muss ich tun, damit das erste Element auch dann erhalten bleibt, wenn Benutzer mehrmals hintereinander auf die dritte Seite mit Elementen klicken?

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;

-----------------------------------

Ersetzen:

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

mit:

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

Die zeigt ein Beispiel für Verschachtelungsrouten, die Ihnen bei der Verbesserung Ihrer Komponente helfen können :

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

-----------------------------------