Зачем маршрутизировать в массиве, чтобы открыть два компонента одновременно

Question

Вот мой код

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

const Home = () => <div>Home</div>;
const About = () => <div>About</div>;
const NoMatch = () => <div>NoMatch</div>;

const RouteAbout = (
  <Route key={"1"} path={"/About/Photo/Public/:Fuu"} component={About} />
);
const RouteNoMatch = (
  <Route key={"2"} path={"/About/Photo/:Juu"} component={NoMatch} />
);
const RouteAboutNoMatch = [RouteAbout, RouteNoMatch];

function App() {
  return (
    <div>
      <Router>
        <div>
          <Link to="/">Home</Link>
          <Link to="/About/Photo/Public/Fuu">About</Link>
          <Link to="/About/Photo/Juu">NoMatch</Link>

          <Switch>
            <Route exact path="/" component={Home} />
            <Fragment>{RouteAboutNoMatch}</Fragment>
            <Route component={NoMatch} />
          </Switch>
        </div>
      </Router>
    </div>
  );
}

когда я нажимаю на ссылку About.About и NoMatch открываются оба компонента. Но я ожидаю увидеть компонент About на экране. В чем проблема, как ее решить?

Answer 1

<Switch> возвращает только один первый соответствующий маршрут.

exact возвращает любое количество точно совпадающих маршрутов.

Когда ваши маршруты такие,

<Route key={"1"} path={"/About/Photo/Public/:Fuu"} component={About} />
<Route key={"2"} path={"/About/Photo/:Juu"} component={NoMatch} />

Интерпретация для лучшего понимания

<Route key={"1"} path={"/base_path/sub_path_1/sub_path_2/sub_path_3"} component={About} />
<Route key={"2"} path={"/base_path/sub_path_1/sub_path_2"} component={NoMatch} />

Теперь, когда вы нажали на ссылку About, он ищет маршрут, и в этом случае он заканчивается двумя маршрутами с путем /base_path/sub_path_1/sub_path_2, и выодновременно получают компоненты About и NoMatch.

, поэтому вам нужно указать атрибут exact , чтобы получить только один компонент.

Также есть точка, в которую нужно добавить exact, поэтому для любого маршрута с меньшим значением sub_path для этого маршрута необходимо добавить атрибут exact.

В вашем случае вы должны добавить атрибут exact к NoMatch компонентному маршруту, потому что он имеет меньше sub_path.

Demo

Answer 2

Вы должны указать точный маршрут

const RouteAbout = (
  <Route key={"1"} exact path={"/About/Photo/Public/:Fuu"} component={About} />
);
const RouteNoMatch = (
  <Route key={"2"} exact  path={"/About/Photo/:Juu"} component={NoMatch} />
);