Реакт-маршрутизатор показывает другое, когда компонент упакован

Question

Я новый реагирующий пользователь, когда я вижу документы о реагирующем маршрутизаторе, я запутался.
позвольте мне показать,
сначала, URL-адрес документа: https://reacttraining.com/react-router/web/example/route-config
I упростите вот так

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

const routes = [
  {
    path: "/",
    component: Sandwiches
  },
  {
    path: "/tacos",
    component: Tacos
  }
];

export default function RouteConfigExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">/</Link>
          </li>
          <li>
            <Link to="/tacos">tacos</Link>
          </li>
        </ul>

        <Switch>
          {routes.map((route, i) => (
            <RouteWithSubRoutes key={i} {...route} />
          ))}
        </Switch>
      </div>
    </Router>
  );
}
function RouteWithSubRoutes(route) {
  return (
    <Route
      exact
      path={route.path}
      component={route.component}
    />
  );
}

function Sandwiches() {
  return <h2>/</h2>;
}

function Tacos() {
  return (
    <div>
      <h2>Tacos</h2>
    </div>
  );
}

сейчас, когда я нажимаю / показать /, но нажимаю Тако ничего не показывать.
что ожидать, нажимаю / показываю / и нажимаю Тако показать тако.
Я решаю этим

// first, do not use component wrap

export default function RouteConfigExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">/</Link>
          </li>
          <li>
            <Link to="/tacos">tacos</Link>
          </li>
        </ul>

        <Switch>
          {routes.map((route, i) => (
            <Route
              key={i}
              exact
              path={route.path}
              component={route.component}/>
          ))}
        </Switch>
      </div>
    </Router>
  );
}

// second, do not use Switch
export default function RouteConfigExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">/</Link>
          </li>
          <li>
            <Link to="/tacos">tacos</Link>
          </li>
        </ul>

        {routes.map((route, i) => (
            <RouteWithSubRoutes key={i} {...route} />
        ))}
      </div>
    </Router>
  );
}

Это беспокоило меня долгое время, теперь я умираю, чтобы узнать почему, Пожалуйста, расскажите мне подробно, и большое спасибо. ..
Кроме того, Мой Engli sh не симпатичный, понимающий ...

Answer 1

Switch только допустимые дочерние компоненты: Route и Redirect, поэтому, даже если другой реагирующий компонент отображает Route, он не будет работать точно так же.

Смена дочерних элементов

Все дочерние элементы <Switch> должны быть <Route> или <Redirect> элементами. Будет обработан только первый дочерний элемент, соответствующий текущему местоположению.

Редактировать

В то время как обернутые Route компоненты могут по-прежнему отображать , как потомки "внуков" , кажется, что реквизиты маршрута применяются только на уровне root Switch.

В следующих Switch, даже если RouteWithSubRoutes указывает exact prop, RouteWithSubRoutes в реагирующем DOM не , поэтому возвращается только первый элемент (по совпадению с домашним "/" маршрутом).

<Switch>
  {routes.map(route => (
    <RouteWithSubRoutes key={route.path} {...route} />
  ))}
</Switch>

Это следующее Switch идентично вышеуказанному, за исключением указания exact prop, и это работает, как и ожидалось.

<Switch>
  {routes.map(route => (
    <RouteWithSubRoutes key={route.path} exact {...route} />
  ))}
</Switch>

/ Edit

Звучит как у вас есть вопрос, состоящий из двух частей, почему оба разрешения работают.

Первая попытка исправить путем рендеринга Route напрямую увенчается указанием реквизита exact на всех маршрутах в Switch, который только соответствует и отображает первый соответствующий Route или Redirect. Когда путь равен точно"/", то этот компонент рендерится, а когда он равен точно"/ tacos", тогда этот компонент рендерит.

Вторая попытка рендеринга все маршруты прямо в Router, который соответствует и отображает все соответствующие маршруты, но, так как вы снова указываете exact prop, он соответствует одному маршруту и ​​работает.

Демо