包装组件时反应路由器显示不同

Question

我是新的 react 用户，当我看到 react-router 文档时，我很困惑。
让我展示一下，
首先，文档网址：https://reacttraining.com/react-router/web/example/route-config
我这样简化

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

现在，当我单击 / 显示 /，但单击 Tacos 时什么都不显示。
期待什么，单击/显示/，然后单击 Tacos 显示 Tacos。
我通过这些解决了

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

困扰了我很久，现在很想知道为什么，请详细告诉我，非常感谢...
另外，我的英文不太好，懂...

Answer 1

Switch 组件只有有效的子组件是 Route 和 Redirect，因此即使另一个 react 组件呈现 Route，它也不会以相同的方式工作。

Switch children

<Switch> 的所有子元素都应该是 <Route> 或 <Redirect> 元素。 只有第一个匹配当前位置的子节点才会被渲染。

编辑

虽然包装的 Route 组件可以仍然呈现，作为“grand-children”后代，但似乎路由道具仅应用于根 Switch 级别.

在下面的Switch中，虽然RouteWithSubRoutes指定了exact这个prop，但是react DOM中的RouteWithSubRoutes没有，所以只返回了第一个元素（正好home "/" 路由）。

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

下面的Switch 与上面的相同，只是指定了exact 属性，并且按预期工作。

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

/编辑

听起来您有一个由两部分组成的问题，为什么两种解决方案都有效。

通过在Switch 内的所有路由上指定exact 属性直接通过渲染Route 进行修复的第一次尝试成功，它只匹配并渲染第一个 匹配Route或Redirect。当路径为 exactly "/" 时，该组件会呈现，而当路径是 exactly "/tacos" 时，则该组件会呈现。

第二次尝试在Router 中渲染所有路由，它匹配并渲染所有 匹配路由，但是由于您再次指定exact 属性，它匹配一个单一路线和作品。

演示