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

我最近在我的路由中实现了react路由器交换机组件，以便呈现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>
    );
  }
}

const路由=[
{
路径：“/”，
确切地说：是的，
组件：（）=>
},
{
路径：“/”，
确切地说：是的，
组件：（）=>
},
{
组件：NoMatch
}
];
类应用程序扩展组件{
render（）{
返回(
{routes.map（（路由，索引）=>
)}
);
}
}

我注意到，如果删除交换机组件，那么所有内容都将渲染得很好，但是NoMatch组件也将渲染到路由

---

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

交换机组件只允许一条路由-基本上每个子路由都有一个隐式的

精确的

属性

---

因此，出于您的目的，您需要删除它，并且您的实验证实了交换机组件只允许一条路由-基本上每个子路由都有一个隐式的精确属性

---

因此，您需要出于您的目的将其删除，并且您的实验证实了

我认为您缺少开关的工作原理

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

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

这样写：

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

const路由=[
{
路径：“/”，
确切地说：是的，
组件：（）=>
},
{
组件：NoMatch
}
];

我认为您缺少开关的工作原理

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

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

这样写：

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

const路由=[
{
路径：“/”，
确切地说：是的，
组件：（）=>
},
{
组件：NoMatch
}
];

再次感谢您解决了我的另一个问题，哈哈！谢谢你解决了我的另一个问题，再一次哈哈！