React路由器交换机组件未呈现具有相同路径的组件

Question

我最近在我的路由中实现了反应路由器开关组件，以便呈现一个NoMatch组件（这只是一个404错误组件）。然而，在我的路由中实现这一点后，我注意到在我的主页上只有一个组件会呈现，标题组件。

标题和搜索栏都应该呈现到相同的路径。

我的代码如下：

const routes = [
  {
    path: "/",                   
    exact: true,
    component: () => <Heading />
  },
  {
    path: "/",                      
    exact: true,
    component: () => <SearchBar />
  },
  {
    component: NoMatch
  }
];

class App extends Component {

  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <MenuBar />
            <Switch>
              {routes.map((route, index) =>
                <Route
                  key={index}
                  path={route.path}
                  exact={route.exact}
                  component={route.component}
                />
              )}
            </Switch>
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

我注意到如果我删除了Switch组件，那么一切都会渲染得很好，但是NoMatch组件也会渲染到路由。

问题：为什么我不能在交换机内部的同一路径上渲染多个组件？当我需要在“/”路径上呈现标题和搜索栏组件时，如何解决此问题？

Answer 1

Switch组件只允许一条路由-基本上每个子路由都有一个隐式的exact属性。

所以你需要为了你的目的移除它，你的实验证实了这一点

Answer 2

我想你错过了开关的工作原理。

Switch将开始寻找匹配的路由，每当它找到匹配时，它将停止寻找匹配并呈现该特定组件。

始终定义唯一的路由，如果要为同一路径渲染多个组件，请使用div包装所有组件。

这样写：

const routes = [
  {
    path: "/",                   
    exact: true,
    component: () => <div> <Heading /> <SearchBar /> </div>
  },
  {
    component: NoMatch
  }
];